Flutter bottom sheet场景下如何将TextField固定在屏幕底部

嵌套在Column内的Stack没有被明确约束尺寸，当你为TextField套入Positioned(bottom: 0)属性时，Stack需要确定自身高度才能计算子组件的位置，当前无固定尺寸的Stack无法满足Positioned的布局要求，就会触发hasSize相关报错。

根据你的布局需求选择对应方案即可：

方案1：需要TextField悬浮在消息列表上层（滑动列表时内容会出现在TextField下方） #

给Stack外层套Expanded，让Stack占满Column除了顶部Title之外的所有可用空间，获得明确的宽高约束后Positioned就能正常布局：

return Column(
  children: [
    const _Title(),
    // 新增Expanded约束Stack尺寸
    Expanded(
      child: Stack(
        children: [
          ListView(
            children: const [
              _Message(),
            ],
          ),
          // 给TextField套Positioned，同时指定left/right保证宽度撑满
          const Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: TextField(
              decoration: InputDecoration(
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.grey,
                  ),
                ),
                border: OutlineInputBorder(),
                hintText: 'Enter a search term',
              ),
            ),
          ),
        ],
      ),
    ),
  ],
);

方案2：不需要悬浮效果，TextField固定在底部，消息列表滚动不会被遮挡 #

不需要用Stack，直接调整Column的结构，让ListView占满中间剩余空间即可，布局更简洁：

return Column(
  children: [
    const _Title(),
    // 让ListView占满Title和TextField之间的所有空间
    Expanded(
      child: ListView(
        children: const [
          _Message(),
        ],
      ),
    ),
    // TextField直接放在Column最底部
    const TextField(
      decoration: InputDecoration(
        enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(
            color: Colors.grey,
          ),
        ),
        border: OutlineInputBorder(),
        hintText: 'Enter a search term',
      ),
    ),
  ],
);

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