Flutter技术问询：无需插件为输入框前置货币、摄氏度等符号

针对你遇到的Row组件导致输入文本被挤开的问题，提供三种无需插件的可行方案：

方案一：利用系统输入框的装饰前缀（适用于TextFormField） #

直接通过InputDecoration的prefix属性添加前置符号，同时调整内容内边距避免文本挤压，这是系统输入框原生支持的方式：

货币符号示例 #

TextFormField(
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
  decoration: const InputDecoration(
    prefix: Text('¥'), // 前置货币符号
    contentPadding: EdgeInsets.only(left: 8), // 调整左侧内边距，避免文本被符号遮挡
    hintText: '请输入金额',
  ),
)

摄氏度符号示例 #

TextFormField(
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
  decoration: const InputDecoration(
    prefix: Text('°C '),
    contentPadding: EdgeInsets.only(left: 8),
    hintText: '请输入温度',
  ),
)

方案二：Stack层叠布局（通用适配CustomTextField） #

用Stack替代Row，将符号层叠在输入框左侧，不占用输入框的布局宽度，彻底解决文本被挤开的问题：

Stack(
  alignment: Alignment.centerLeft, // 符号靠左对齐
  children: [
    CustomTextField(
      inputFormatters: [
        FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
      ],
      onSaved: (value) {},
      hint: '',
      controller: _vlaueofvehicle,
      validator: (value) {
        if (value == null || value.isEmpty) {
          return 'Please enter the degree in celsius  (°)';
        }
        return null;
      },
      // 给左侧留足够空间放置符号，避免文本重叠
      decoration: const InputDecoration(
        contentPadding: EdgeInsets.only(left: 24),
      ),
    ),
    // 符号组件，调整padding控制与输入框的间距
    const Padding(
      padding: EdgeInsets.only(left: 8),
      child: Text('°C'),
    ),
  ],
)

方案三：修改CustomTextField源码，添加前缀参数（长期复用最优解） #

如果CustomTextField是你自己封装的组件，直接在内部添加prefix参数，集成前置符号的布局逻辑，后续使用更便捷：

第一步：修改CustomTextField类 #

class CustomTextField extends StatelessWidget {
  final Widget? prefix; // 新增前缀组件参数
  final List<TextInputFormatter>? inputFormatters;
  final void Function(String?)? onSaved;
  final String hint;
  final TextEditingController? controller;
  final String? Function(String?)? validator;

  const CustomTextField({
    super.key,
    this.prefix,
    this.inputFormatters,
    this.onSaved,
    required this.hint,
    this.controller,
    this.validator,
  });

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      inputFormatters: inputFormatters,
      onSaved: onSaved,
      controller: controller,
      validator: validator,
      decoration: InputDecoration(
        hintText: hint,
        prefix: prefix, // 传入前缀组件
        contentPadding: const EdgeInsets.only(left: 8),
      ),
    );
  }
}

第二步：使用带前缀的CustomTextField #

CustomTextField(
  prefix: const Text('°C '), // 直接传入前置符号
  inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'[0-9]'))],
  onSaved: (value) {},
  hint: '',
  controller: _vlaueofvehicle,
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter the degree in celsius  (°)';
    }
    return null;
  },
)

额外补充：自动添加不可删除的前缀 #

如果需要符号始终固定在输入框最前方，用户无法删除，可以自定义TextInputFormatter实现：

class FixedPrefixFormatter extends TextInputFormatter {
  final String fixedPrefix;

  FixedPrefixFormatter(this.fixedPrefix);

  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
    // 空文本直接返回
    if (newValue.text.isEmpty) return newValue;
    // 已有前缀则保留
    if (newValue.text.startsWith(fixedPrefix)) return newValue;
    // 自动添加前缀，并调整光标位置
    return TextEditingValue(
      text: '$fixedPrefix${newValue.text}',
      selection: TextSelection.collapsed(
        offset: fixedPrefix.length + newValue.selection.end,
      ),
    );
  }
}

使用示例 #

TextFormField(
  inputFormatters: [
    FixedPrefixFormatter('¥'),
    FilteringTextInputFormatter.digitsOnly,
  ],
)

内容的提问来源于stack exchange，提问作者WonderingDino