Flutter聊天窗口布局调整：输入框底部对齐需求求助

要将输入消息框移至页面底部并实现类似WhatsApp的样式，只需修改布局结构，核心是使用Column和Expanded组件分配空间。以下是修正后的完整代码：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Chat',
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.black,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Some url"),
          actions: <Widget>[
            IconButton(
              icon: const Icon(Icons.logout_rounded),
              onPressed: () {},
            ),
          ],
          backgroundColor: Colors.greenAccent[400],
          elevation: 50.0,
          leading: IconButton(
            icon: const Icon(Icons.link_outlined),
            onPressed: () {},
          ),
        ),
        body: Column(
          children: [
            // 聊天消息区域（后续可替换为ListView展示消息列表）
            Expanded(
              child: Container(),
            ),
            // 输入框区域
            Padding(
              padding: EdgeInsets.only(
                bottom: MediaQuery.of(context).viewInsets.bottom,
                left: 16,
                right: 16,
                top: 8,
              ),
              child: Row(
                children: [
                  Expanded(
                    child: TextField(
                      cursorColor: Colors.white70,
                      style: const TextStyle(color: Colors.white70),
                      decoration: InputDecoration(
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(20.0),
                          borderSide:
                              const BorderSide(color: Colors.black, width: 2.0),
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(20.0),
                          borderSide:
                              const BorderSide(color: Colors.black, width: 2.0),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(20.0),
                          borderSide:
                              const BorderSide(color: Colors.black, width: 2.0),
                        ),
                        filled: true,
                        fillColor: const Color.fromARGB(255, 27, 29, 35),
                        hintText: 'Message',
                        hintStyle: const TextStyle(
                          color: Colors.white24,
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(width: 15),
                  MaterialButton(
                    color: Colors.white70,
                    onPressed: () {},
                    child: const Icon(
                      Icons.send,
                      color: Colors.black,
                      size: 15,
                    ),
                    shape: const CircleBorder(),
                    padding: const EdgeInsets.all(24),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键修改说明： #

1. 替换布局结构：将原Center组件改为Column，把页面分为消息展示区和输入区两部分。
2. 使用Expanded组件：消息区用Expanded包裹，使其占据页面除输入区外的所有剩余空间，强制输入框固定在底部。
3. 优化输入区padding：增加左右内边距避免输入框贴边，保留viewInsets.bottom确保键盘弹出时输入框不会被遮挡。
4. 移除冗余容器：删除原输入区外层的Container，脚手架背景已设为黑色，无需额外设置背景色和宽度。

后续只需将消息区的空Container替换为ListView或ListView.builder即可加载聊天记录，完全符合WhatsApp的布局样式。

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