Flutter主页添加超4个按钮出现bottom溢出，如何让页面可滚动？

你遇到的bottom overflowed报错是因为当前用的Column组件默认不可滚动，当内部子组件的总高度超过屏幕可用高度时，就会触发溢出提示。同时你给每个按钮外层包裹的Expanded只能在有固定高度约束的父容器中生效，要实现滚动效果需要调整布局结构。

将布局替换为可滚动结构，修改后的完整代码如下：

import 'package:bacaan_sholat/page/bacaan_sholat_page.dart';
import 'package:bacaan_sholat/page/niat_sholat_page.dart';
import 'package:flutter/material.dart';

class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green.shade100,
      body: SafeArea(
        // 新增SingleChildScrollView让整个内容可滚动
        child: SingleChildScrollView(
          physics: const AlwaysScrollableScrollPhysics(),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              // 新增上下内边距避免内容贴边
              padding: const EdgeInsets.symmetric(vertical: 20),
              children: [
                Container(
                  margin: const EdgeInsets.all(10),
                  // 移除了Expanded，滚动布局下不需要
                  child: InkWell(
                    highlightColor: Colors.transparent,
                    splashColor: Colors.transparent,
                    onTap: () {
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => const NiatSholat()));
                    },
                    child: Column(
                      children: const [
                        Image(
                          image: AssetImage("assets/images/ic_niat.png"),
                          height: 100,
                          width: 100,
                        ),
                        SizedBox(height: 10),
                        Text(
                          "Doa Harian Muslim",
                          style: TextStyle(
                              fontSize: 14, fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ),
                ),
                const SizedBox(height: 40),
                Container(
                  margin: const EdgeInsets.all(10),
                  child: InkWell(
                    highlightColor: Colors.transparent,
                    splashColor: Colors.transparent,
                    onTap: () {
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => const BacaanSholat()));
                    },
                    child: Column(
                      children: const [
                        Image(
                          image: AssetImage("assets/images/ic_doa.png"),
                          height: 100,
                          width: 100,
                        ),
                        SizedBox(height: 10),
                        Text(
                          "Bacaan Sholat",
                          style: TextStyle(
                              fontSize: 14, fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ),
                ),
                const SizedBox(height: 40),
                Container(
                  margin: const EdgeInsets.all(10),
                  child: InkWell(
                    highlightColor: Colors.transparent,
                    splashColor: Colors.transparent,
                    onTap: () {
                      Navigator.push(context,
                          MaterialPageRoute(builder: (context) => const AyatKursi()));
                    },
                    child: Column(
                      children: const [
                        Image(
                          image: AssetImage("assets/images/ic_bacaan.png"),
                          height: 100,
                          width: 100,
                        ),
                        SizedBox(height: 10),
                        Text(
                          "Ayat Kursi",
                          style: TextStyle(
                              fontSize: 14, fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ),
                ),
                const SizedBox(height: 40),
                Container(
                  margin: const EdgeInsets.all(10),
                  child: InkWell(
                    highlightColor: Colors.transparent,
                    splashColor: Colors.transparent,
                    onTap: () {
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => const BacaanSholat()));
                    },
                    child: Column(
                      children: const [
                        Image(
                          image: AssetImage("assets/images/ic_doa.png"),
                          height: 100,
                          width: 100,
                        ),
                        SizedBox(height: 10),
                        Text(
                          "Bacaan Sholat",
                          style: TextStyle(
                              fontSize: 14, fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ),
                ),
                const SizedBox(height: 40),
                Container(
                  margin: const EdgeInsets.all(10),
                  child: InkWell(
                    highlightColor: Colors.transparent,
                    splashColor: Colors.transparent,
                    onTap: () {
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => const BacaanSholat()));
                    },
                    child: Column(
                      children: const [
                        Image(
                          image: AssetImage("assets/images/ic_doa.png"),
                          height: 100,
                          width: 100,
                        ),
                        SizedBox(height: 10),
                        Text(
                          "Bacaan Sholat",
                          style: TextStyle(
                              fontSize: 14, fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ),
                ),
                // 后续再添加更多按钮也不会溢出，会自动滚动
              ],
            ),
          ),
        ),
      ),
    );
  }
}

// 请补充你自己的页面实现，以下为示例占位
class AyatKursi extends StatelessWidget {
  const AyatKursi({super.key});
  @override
  Widget build(BuildContext context) => Scaffold(appBar: AppBar(title: const Text("Ayat Kursi")));
}
class NiatSholat extends StatelessWidget {
  const NiatSholat({super.key});
  @override
  Widget build(BuildContext context) => Scaffold(appBar: AppBar(title: const Text("Niat Sholat")));
}
class BacaanSholat extends StatelessWidget {
  const BacaanSholat({super.key});
  @override
  Widget build(BuildContext context) => Scaffold(appBar: AppBar(title: const Text("Bacaan Sholat")));
}

• 给原本的Center外层包裹SingleChildScrollView组件，实现整个页面内容的滚动效果
• 移除了每个按钮外层的Expanded组件，SingleChildScrollView是无固定高度约束的滚动容器，Expanded在此场景下无法生效
• 给Column添加了垂直内边距，避免内容紧贴屏幕边缘，提升显示效果
• 添加了AlwaysScrollableScrollPhysics滚动物理效果，保证内容不足一屏时也可以正常拖动

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