Flutter如何将白色Container固定在页面底部（适配多屏幕）

要让白色容器始终固定在屏幕底部，同时适配不同屏幕尺寸，无需设置固定的paddingTop或marginTop，可以通过调整布局结构实现，核心思路是利用Column+Expanded的组合分配空间，让底部容器自动贴底。

修改后的完整代码如下：

class SignIn extends StatelessWidget {
  const SignIn({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green,
      body: SafeArea(
        // 外层用Column分配空间
        child: Column(
          children: [
            // 顶部可滚动内容用Expanded包裹，占据除底部容器外的所有空间
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(top: 20),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            "Text",
                            textAlign: TextAlign.center,
                            style: TextStyle(fontSize: 20),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            // 白色容器放在Column最后，自动贴底
            Stack(
              alignment: Alignment.topCenter,
              clipBehavior: Clip.none,
              children: [
                Container(
                  padding: const EdgeInsets.only(
                    top: 40, // 给顶部圆形按钮预留空间
                    left: 10,
                    right: 20,
                  ),
                  decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(30),
                      topRight: Radius.circular(30),
                    ),
                  ),
                  child: Column(
                    children: [
                      Row(
                        children: const [
                          Padding(
                            padding: EdgeInsets.only(left: 20),
                            child: Text(
                              "Sign In",
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 25,
                              ),
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 25),
                      const SizedBox(height: 20),
                      const Center(child: Text("End")),
                    ],
                  ),
                ),
                // 圆形按钮通过Stack的top偏移定位在白色容器上方
                Positioned(
                  top: -30, // 按钮一半高度在容器外
                  right: 50,
                  child: Container(
                    height: 60,
                    width: 60,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(30),
                      color: Colors.green,
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

关键修改说明： #

• 布局结构调整：将原有的SingleChildScrollView直接包裹整个Column的结构，改为外层用Column，顶部可滚动内容由Expanded包裹，这样顶部内容会自动填充屏幕除底部容器外的所有空间，底部容器自然固定在屏幕底部。
• 移除适配风险参数：去掉了依赖屏幕高度的height * 0.05和固定的marginTop:50，改用固定的padding: EdgeInsets.only(top:40)给圆形按钮预留空间，避免不同屏幕尺寸下的适配问题。
• 圆形按钮定位优化：用Stack+Positioned替代原有的Padding+Align，通过top: -30让按钮一半嵌入白色容器上方，位置更精准且适配所有屏幕。

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