Flutter TextField设置filled及fillColor时hintText被截断问题咨询

未设置fillColor时的效果

设置fillColor后的效果

• 开发场景：在SizedBox组件内嵌套Row组件，Row中同时放置TextField输入框与按钮组件。
• 问题表现：为TextField设置fillColor属性时，输入框的hintText提示文本出现截断异常。

问题复现代码 #

AppBar(
          title: const Text('test'),
          centerTitle: true,
          automaticallyImplyLeading: false,
          actions:[
            SizedBox(
              width: 300,
              child:
                <Widget>[
                   Row(children: [
                       const Expanded(
                            child: TextField(
                              decoration: InputDecoration(
                                prefixIcon: Icon(Icons.search,color: greyFont,size: 32),
                                hintText: 'Search farm or customer',
                                //fillColor: Colors.white,
                                //filled: true,
                              ),
                            )
                        ),
                        Padding(
                            padding: const EdgeInsets.symmetric(vertical: 10),
                            child: ElevatedButton(
                              onPressed: (){},
                              style: ElevatedButton.styleFrom(
                                  minimumSize: const Size(60, 35),
                                  maximumSize: const Size(60, 35)),
                              child:
                                const ImageIcon(
                                  AssetImage('assets/back_arrow.png'),
                                  size: 32,
                                ),
                            )
                        ),
                      ])
                )
              ] + <Widget> [
              IconButton(
                icon: const Icon(Icons.more_vert,size: 40),
                onPressed: () {},
              ),
            ],
),

问题产生原因 #

截断问题由两方面问题共同导致：

1. 输入框布局约束冲突
   未开启filled: true时，TextField无背景填充容器，高度会自适应内部图标、文本尺寸，hint文本有足够渲染空间。当开启filled: true并设置fillColor后，InputDecorator会生成带背景的填充容器，默认应用Material Design规范的固定高度与上下内边距。当前代码中设置的prefixIcon尺寸为32，加上默认内边距后总高度超过AppBar actions区域分配的可用高度，输入框内容被垂直压缩，最终hint文本因空间不足被截断。
2. 代码语法错误
   SizedBox的child属性仅支持接收单个组件，原代码误将Widget列表直接赋值给child，后续的actions列表拼接逻辑位置错误，会进一步干扰布局计算，加剧渲染异常。

修复方案 #

1. 修正actions区域的布局语法，将搜索区SizedBox和更多按钮作为独立元素放入actions列表，不要在child属性中拼接Widget列表。
2. 为TextField设置紧凑布局参数，调整内边距适配现有图标尺寸，让输入框总高度匹配AppBar可用高度，避免内容被压缩。

修复后的参考代码：

AppBar(
  title: const Text('test'),
  centerTitle: true,
  automaticallyImplyLeading: false,
  actions: [
    SizedBox(
      width: 300,
      child: Row(
        children: [
          Expanded(
            child: TextField(
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.search, color: greyFont, size: 32),
                hintText: 'Search farm or customer',
                fillColor: Colors.white,
                filled: true,
                // 启用紧凑布局，减少默认冗余内边距
                isDense: true,
                // 手动调整垂直内边距，适配32尺寸前缀图标
                contentPadding: const EdgeInsets.symmetric(vertical: 8),
                // 可选：设置圆角边框让填充背景样式更统一
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(6),
                  borderSide: BorderSide.none,
                ),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 8),
            child: ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                minimumSize: const Size(60, 35),
                maximumSize: const Size(60, 35),
              ),
              child: const ImageIcon(
                AssetImage('assets/back_arrow.png'),
                size: 32,
              ),
            ),
          ),
        ],
      ),
    ),
    IconButton(
      icon: const Icon(Icons.more_vert, size: 40),
      onPressed: () {},
    ),
  ],
)

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