Flutter Stack添加TextField报RenderFlex宽度无界错误解决方法

需要实现的UI效果如下：

该设计逻辑本身并不复杂，使用纯HTML+CSS开发30分钟即可完成，但在Flutter中实现时触发布局报错：

RenderFlex children have non-zero flex but incoming width constraints are unbounded

初步判断报错和Expanded组件未接收到有效宽度约束、与Row组件产生布局冲突有关，多次尝试修改未生效，原有实现代码如下：

Widget build(BuildContext context) {   
  return Stack(
    children: [
      Row(
        children: [
          Expanded(
            child: TextField(
              maxLength: 140,
              decoration: InputDecoration(
                filled: true,
                contentPadding: EdgeInsets.only(left: 20, top: 5, right: 60, bottom: 5),
                hintStyle: TextStyle(
                  color: Colors.grey[800]
                ),
                hintText: "Write something here",
                fillColor: Colors.white,
                focusedBorder: OutlineInputBorder(
                  borderSide: const BorderSide(color: Colors.transparent, width: 25.0),
                  borderRadius: BorderRadius.all(Radius.circular(30)),
                ),
                enabledBorder: OutlineInputBorder(
                  borderSide: const BorderSide(color: Colors.transparent, width: 25.0),
                  borderRadius: BorderRadius.all(Radius.circular(30)),
                ),
              ),
            )
        )],
      ),
       
      Positioned(
        right: 0,
        top: 0,
        child: Center(
          child:   
            _selectedIcon == null ?  ElevatedButton(
              style: ButtonStyle(
                elevation: MaterialStateProperty.all<double>(0), 
                backgroundColor: MaterialStateProperty.all<Color>(Colors.transparent)
              ),          
              onPressed: () async {
                final IconData? result = await customiconpickerFuture( context: context, defalutIcon: _selectedIcon);
                setState(() {
                  _selectedIcon = result;
                });
              },
                child: _selectedIcon == null ? const Icon(
                  IconData(0xe907, fontFamily: 'icomoon'), 
                  color: Colors.black, 
                  size: 40,
                  ) : Icon(_selectedIcon,size: 70, color: Colors.black, ) 
            )
            : ElevatedButton(
              style: ButtonStyle(
                elevation: MaterialStateProperty.all<double>(0), 
                backgroundColor: MaterialStateProperty.all<Color>(Colors.transparent)
              ),          
              onPressed: () async {
                final IconData? result = await customiconpickerFuture( context: context, defalutIcon: _selectedIcon);
                setState(() {
                  _selectedIcon = result;
                });
              },
                child: Icon(_selectedIcon,size: 40, color: Colors.black, ) 
            )
        ),
      ) 
    ],
  );
}

报错的核心触发点是Stack的布局规则：Stack中未被Positioned包裹、且没有设置对齐约束的子组件，会收到无界的水平/垂直约束。直接在Stack中放入Row时，Row内的Expanded会尝试撑满全部可用水平宽度，但此时可用水平宽度是无限的，自然会触发约束冲突报错。
另外原有代码存在冗余逻辑：两个ElevatedButton的样式、点击事件完全一致，仅根据_selectedIcon是否为空判断显示不同的icon，不需要重复写两个按钮组件。

• 给包裹TextField的Row添加明确的水平约束：用Positioned包裹Row，设置left: 0, right: 0, top: 0，让Row撑满Stack的可用宽度，给Expanded提供可计算的宽度边界。
• 移除冗余的重复按钮代码，统一在单个ElevatedButton内判断icon的显示逻辑。
• 移除Positioned内多余的Center组件，调整按钮偏移量，让按钮和输入框垂直居中对齐。

修复后的完整代码如下：

Widget build(BuildContext context) {   
  return Stack(
    children: [
      // 给Row添加明确的水平约束，解决Expanded无界问题
      Positioned(
        left: 0,
        right: 0,
        top: 0,
        child: Row(
          children: [
            Expanded(
              child: TextField(
                maxLength: 140,
                decoration: InputDecoration(
                  filled: true,
                  contentPadding: EdgeInsets.only(left: 20, top: 5, right: 60, bottom: 5),
                  hintStyle: TextStyle(
                    color: Colors.grey[800]
                  ),
                  hintText: "Write something here",
                  fillColor: Colors.white,
                  focusedBorder: const OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.transparent, width: 25.0),
                    borderRadius: BorderRadius.all(Radius.circular(30)),
                  ),
                  enabledBorder: const OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.transparent, width: 25.0),
                    borderRadius: BorderRadius.all(Radius.circular(30)),
                  ),
                ),
              )
          )
        ],
      ),
       
      Positioned(
        right: 4,
        top: 4,
        child: ElevatedButton(
          style: ButtonStyle(
            elevation: MaterialStateProperty.all<double>(0), 
            backgroundColor: MaterialStateProperty.all<Color>(Colors.transparent),
            // 去掉按钮默认内边距，对齐更精准
            padding: MaterialStateProperty.all(EdgeInsets.zero),
            minimumSize: MaterialStateProperty.all(Size(48, 48)),
          ),          
          onPressed: () async {
            final IconData? result = await customiconpickerFuture(context: context, defalutIcon: _selectedIcon);
            setState(() {
              _selectedIcon = result;
            });
          },
          // 统一icon渲染逻辑，移除冗余判断
          child: _selectedIcon == null 
            ? const Icon(
                IconData(0xe907, fontFamily: 'icomoon'), 
                color: Colors.black, 
                size: 40,
              ) 
            : Icon(_selectedIcon, size: 40, color: Colors.black) 
        ),
      ) 
    ],
  );
}

注：原有代码中选中icon后显示70尺寸的逻辑会导致图标溢出输入框范围，修复版统一调整为40尺寸，可根据实际UI需求微调数值。

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