Flutter开发报错求助：build函数返回空+RenderFlex底部溢出

嘿，我来帮你排查这两个Flutter布局问题：

第一个错误：build函数返回null #

你看GridDashboard的build方法里，整个GridView.builder的代码都被你用注释完全包裹住了！这就导致build函数没有返回任何Widget，Flutter自然会抛出"build函数返回null"的异常——毕竟组件的build方法必须返回一个合法的Widget才行。

第二个错误：RenderFlex底部溢出99515像素 #

你在Home页面的Column里直接放了GridDashboard，而GridDashboard里的GridView是滚动组件，它默认会尝试占用无限的垂直空间。但Column是线性布局，它没办法为没有高度约束的子Widget分配合理空间，最终就会触发溢出问题。

修正后的代码 #

1. 修复GridDashboard类 #

把注释掉的GridView.builder代码取消注释，让build方法返回正确的Widget：

class GridDashboard extends StatelessWidget {
  var services = [
    "Home",
    "Settings",
    "Supervisor",
    "Logout",
    "Forms",
    "Messages",
    "bluetooth",
    "Check for updates",
    "Update"
  ];
  var images = [
    "images/calendar.png",
    "images/festival.png",
    "images/food.png",
    "images/image.png",
    "images/logout.png",
    "images/setting.png",
    "images/note.png",
    "images/todo.png",
    "images/map.png",
  ];

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: GridView.builder(
        itemCount: services.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          childAspectRatio: MediaQuery.of(context).size.width /
              (MediaQuery.of(context).size.height / 1.4),
        ),
        itemBuilder: (BuildContext context, int index) {
          return Card(
            child: Column(
              children: <Widget>[
                SizedBox(height: 20),
                Image.asset(
                  images[index],
                  height: 50.0,
                  width: 50.0,
                ),
                Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Text(
                    services[index],
                    style: TextStyle(fontSize: 16.0, height: 1.2),
                    textAlign: TextAlign.center,
                  ),
                )
              ],
            ),
          );
        },
      ),
    );
  }
}

2. 修复Home类的布局 #

给GridDashboard外面套一个Expanded组件，让它自动占用Column中剩余的垂直空间：

class Home extends StatefulWidget {
  @override
  HomeState createState() => new HomeState();
}

class HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xff392850),
      body: Column(
        children: <Widget>[
          SizedBox(height: 110),
          Padding(
            padding: EdgeInsets.only(left: 16, right: 16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "Full Names",
                      style: GoogleFonts.openSans(
                          textStyle: TextStyle(
                              color: Colors.white,
                              fontSize: 18,
                              fontWeight: FontWeight.bold)),
                    ),
                    SizedBox(height: 4),
                    Text(
                      "Home",
                      style: GoogleFonts.openSans(
                          textStyle: TextStyle(
                              color: Color(0xffa29aac),
                              fontSize: 14,
                              fontWeight: FontWeight.w600)),
                    ),
                  ],
                ),
                IconButton(
                  alignment: Alignment.topRight,
                  icon: Image.asset(
                    "assets/notification.png",
                    width: 24,
                  ),
                  onPressed: () => {},
                ),
              ],
            ),
          ),
          SizedBox(height: 40),
          // 用Expanded包裹GridDashboard，约束其高度
          Expanded(
            child: GridDashboard(),
          )
        ],
      ),
    );
  }
}

这样修改后，两个问题都能解决：

• GridDashboard的build方法现在能正确返回GridView组件，不会再出现返回null的异常；
• Expanded会让GridView自动适配剩余空间，彻底解决RenderFlex溢出的问题。

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