Flutter聊天页底部固定文本输入栏布局异常问题求解

添加Row组件后输入栏无法渲染的核心问题是*TextField在Row水平布局中缺少宽度约束*：Row组件会给子组件传递无界水平布局约束，而TextField默认会尝试占满所有可用水平空间，两者约束冲突直接导致底部输入栏整体布局失败。
另外原代码中Container结尾误写分号，属于语法错误也会影响正常编译。

按照「顶部AppBar固定、中间消息区滚动、底部输入栏固定」的需求调整即可，核心改动点：

• 给Row内的TextField包裹Expanded组件，让其自动占用发送按钮之外的剩余水平空间，解决布局约束冲突
• 修正Container位置的多余分号语法错误
• 适配输入栏高度调整组件尺寸，避免内容溢出

修复后可直接运行的代码 #

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: ColorConstant.whiteA700,
    // 固定顶部导航栏
    appBar: AppBar(
      backgroundColor: ColorConstant.deepOrange300,
      title: Text(
        "Match's Name",
        style: AppStyle.textstyleinterregular15.copyWith(
          fontSize: getFontSize(15)
        ),
      ),
    ),
    body: Column(
      children: [
        // 中间可滚动消息区，自动占满顶栏和底栏之外的剩余空间
        Expanded(
          child: SingleChildScrollView(
            child: Column(
              children: [
                // 后续直接放置聊天气泡组件即可
              ],
            ),
          ),
        ),
        // 固定底部输入栏
        Container(
          height: 45,
          width: double.infinity,
          padding: const EdgeInsets.symmetric(horizontal: 8),
          color: ColorConstant.whiteA700,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              // Expanded包裹TextField解决Row内水平约束冲突
              Expanded(
                child: TextField(
                  decoration: InputDecoration(
                    contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                    hintText: "Message...",
                    hintStyle: TextStyle(color: ColorConstant.bluegray100),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(20),
                      borderSide: BorderSide(color: ColorConstant.bluegray100)
                    ),
                  )
                ),
              ),
              const SizedBox(width: 15,),
              // 发送按钮
              FloatingActionButton(
                mini: true, // 适配45高输入栏，避免按钮尺寸溢出
                onPressed: (){},
                child: Icon(Icons.send,color: ColorConstant.whiteA700,size: 18,),
                backgroundColor: ColorConstant.lightBlueA100,
                elevation: 0,
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

• 不建议用BottomNavigationBar实现聊天输入栏，该组件是为底部多Tab导航设计的，布局限制较多，不适合承载输入框类交互组件
• 该布局默认支持键盘唤起时输入栏自动跟随上移，不需要额外配置，Scaffold的resizeToAvoidBottomInset属性默认开启，键盘弹出时会自动压缩中间滚动区高度，输入栏始终贴在键盘顶部
• 后续实现聊天气泡自动滚动到底部效果时，给SingleChildScrollView绑定ScrollController，收到新消息时调用controller.jumpTo(controller.position.maxScrollExtent)即可

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