Flutter自定义AppBar实现搜索功能时使用TextField引发异常如何解决

问题根因 #

这是Flutter TextField系列组件的常见布局异常：TextFormField默认会尝试填充父组件提供的最大横向可用空间，而你直接将其放在Row中，没有为其施加宽度约束，导致布局系统计算尺寸时出现无限宽度报错，这也是替换为固定尺寸的Text组件就可以正常运行的原因。

解决方案 #

给TextFormField外层包裹Expanded组件，让它自动填充Row中除了其他固定宽度组件外的剩余可用空间即可，同时可以额外优化输入框样式适配AppBar的高度。

关键修改代码：

Visibility(
  visible: search == true,
  child: Expanded(
    child: TextFormField(
      decoration: InputDecoration(
        hintText: hint, // 使用构造传入的hint参数代替写死的字符串
        prefixIcon: const Icon(Icons.search, size: 20),
        border: InputBorder.none,
        contentPadding: const EdgeInsets.symmetric(horizontal: 8),
      ),
      maxLines: 1,
      minLines: 1,
    ),
  ),
),

另外你代码中定义的preferredSize高度是50，但是AppBar的Container实际高度设为55，建议统一数值避免布局偏差：

// 统一高度为55即可
preferredSize = const Size.fromHeight(55.0),

修改后即可正常显示搜索框，达到预期效果。

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