Flutter添加TextField后Container消失问题求助

我要实现一个包含两个TextField的Container，用于输入产品名称和描述，点击按钮时这个Container会显示并占位。原本无TextField时功能正常，但添加TextField后Container直接消失，找不到原因。

带TextField的Container代码 #

Padding(
  padding: const EdgeInsets.only(top: 4, bottom: 12),
  child: Container(
      width: 400,
      height: 125,
      decoration: BoxDecoration(
        color: Color(0xFF00ABB3),
        borderRadius: BorderRadius.all(Radius.circular(widgetsRadius))
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 20),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 25),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: const [
                  TextField(
                    decoration: InputDecoration(
                      hintText: "Name"
                    ),
                  ),
                  TextField(
                    decoration: InputDecoration(
                        hintText: "Description"
                    ),
                  )
                ],
              ),
            ),
            GestureDetector(
              onTap: () {
                setState(() {
                  isButtonVisible = !isButtonVisible;
                });
              },
              child: Icon(Icons.arrow_circle_right, color: Colors.white,)
            )
          ],
        ),
      ),
    ),
);

效果对比 #

• 无TextField时的效果：
  

• 添加TextField后的效果：
  

isButtonVisible相关代码 #

Scaffold(
  body: Padding(
    padding: const EdgeInsets.only(left: 28, right: 28, top: 35, bottom: 10),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        AnimatedCrossFade(
          duration: const Duration(milliseconds: 150),
          sizeCurve: Curves.easeOutCirc,
          firstChild: _addProductButton(),
          secondChild: _emptyProductContainer(),
          crossFadeState: isButtonVisible ? CrossFadeState.showFirst : CrossFadeState.showSecond,
        ),
      ],
    ),
  ),
);

问题原因及解决方法 #

核心原因 #

TextField默认会占用无限宽度，放在Row嵌套Column的结构里时，未限制宽度会导致布局溢出，Container被挤压消失；同时Column里的TextField使用了const修饰，会干扰布局状态更新。

具体修复步骤 #

1. 给TextField添加宽度限制：用SizedBox包裹TextField，指定合理宽度，避免布局溢出：

// 替换原Column内的子项
children: [
  SizedBox(
    width: 250, // 根据实际需求调整宽度
    child: TextField(
      decoration: InputDecoration(
        hintText: "Name",
        filled: true,
        fillColor: Colors.white, // 可选，让输入框更清晰
      ),
    ),
  ),
  SizedBox(
    width: 250,
    child: TextField(
      decoration: InputDecoration(
        hintText: "Description",
        filled: true,
        fillColor: Colors.white,
      ),
    ),
  )
]

2. 移除const修饰：去掉Column子项列表前的const，因为TextField涉及输入状态变化，const会阻止布局正常更新。
3. 统一AnimatedCrossFade子项大小：给_addProductButton()设置和Container一致的宽高（400x125），确保切换时布局稳定，避免跳动。

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