Flutter TextField如何设置宽度为指定字符数？

Flutter 没有像 HTML 里 input 标签那样直接的 size 属性，但可以通过以下几种方式实现 TextField 宽度匹配指定字符数量的效果：

方法一：用 TextPainter 精确计算宽度（推荐） #

通过 TextPainter 可以精准计算对应字符数的文本宽度，再动态设置 TextField 的容器宽度，能适配不同字体、字号的情况。

示例代码：

import 'package:flutter/material.dart';

class CharacterSizedTextField extends StatelessWidget {
  final int targetCharacterCount;
  final TextStyle? inputStyle;
  final String? hintText;

  const CharacterSizedTextField({
    super.key,
    required this.targetCharacterCount,
    this.inputStyle,
    this.hintText,
  });

  double _getTargetWidth() {
    // 使用与输入框一致的样式，默认用系统常用样式
    final effectiveStyle = inputStyle ?? const TextStyle(fontSize: 14);
    // 用数字0作为占位符（多数字体中数字宽度统一，接近常规字符宽度）
    final placeholderText = '0' * targetCharacterCount;
    
    final textPainter = TextPainter(
      text: TextSpan(text: placeholderText, style: effectiveStyle),
      textDirection: TextDirection.ltr,
    )..layout();
    
    return textPainter.width;
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: _getTargetWidth(),
      child: TextField(
        style: inputStyle,
        decoration: InputDecoration(
          hintText: hintText,
          border: const OutlineInputBorder(),
        ),
        // 可选：配合限制输入字符数，和宽度对应
        maxLength: targetCharacterCount,
      ),
    );
  }
}

// 使用示例
void main() => runApp(const MaterialApp(
      home: Scaffold(
        body: Center(
          child: CharacterSizedTextField(
            targetCharacterCount: 20,
            hintText: '宽度适配20个字符',
            inputStyle: TextStyle(fontSize: 16, fontFamily: 'Roboto'),
          ),
        ),
      ),
    ));

注意事项： #

• 如果需要适配全角字符，把占位符换成全角空格（　），因为全角字符宽度是半角的两倍
• 务必保证计算时的 effectiveStyle 和 TextField 的 style 完全一致，否则宽度会有偏差

方法二：用 IntrinsicWidth + 隐藏文本（简单场景） #

通过一个隐藏的 Text 组件提供目标宽度，让 TextField 继承这个宽度，适合快速实现的简单场景：

Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    // 隐藏的文本，提供20个字符的宽度模板
    Visibility(
      visible: false,
      child: Text(
        '0' * 20,
        style: const TextStyle(fontSize: 14), // 和TextField样式一致
      ),
    ),
    IntrinsicWidth(
      child: TextField(
        style: const TextStyle(fontSize: 14),
        decoration: const InputDecoration(
          border: OutlineInputBorder(),
          hintText: '宽度适配20字符',
        ),
      ),
    ),
  ],
)

这种方法的缺点是必须严格保持隐藏文本和 TextField 的样式一致，否则宽度会不匹配。

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