如何使4个网格适合Flutter中的剩余空间

Question

我正在尝试制作类似于以下设计的小部件。我似乎无法弄清楚如何使自己的物品成长。在android中，我将使用match_parent。但这是我不知道该如何实施的东西？

这就是我得到的：

我的自定义小部件

import 'package:flutter/material.dart';

class HomeTiles extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        child: Column(mainAxisSize: MainAxisSize.max, children: [
          Container(
              child: Row(children: [
                Expanded(
                    child: HomeItem(
                        title: Localization.of(context).homeExercises,
                        icon: Icons.fitness_center,
                        color: ThemeColors.blueColor)),
                Padding(padding: EdgeInsets.only(left: ThemeDimens.padding)),
                Expanded(
                    child: HomeItem(
                        title: Localization.of(context).homeDiet,
                        icon: Icons.restaurant_menu,
                        color: ThemeColors.greenColor))
              ])),
          Padding(padding: EdgeInsets.only(top: ThemeDimens.padding)),
          Container(
              child: Row(
                children: [
                  Expanded(
                      child: HomeItem(
                          title: Localization.of(context).homeTimer,
                          icon: Icons.timer,
                          color: ThemeColors.redColor)),
                  Padding(padding: EdgeInsets.only(left: ThemeDimens.padding)),
                  Expanded(
                      child: HomeItem(
                          title: Localization.of(context).homeMyClub,
                          icon: Icons.home,
                          color: ThemeColors.orangeColor)),
                ],
              ))
        ]));
  }
}

这是HomeTiles小部件的父级：

import 'package:balance/page/history_page.dart';
import 'package:balance/page/users_page.dart';
import 'package:balance/widget/general/background.dart';
import 'package:balance/widget/general/bottom_navigation.dart';
import 'package:balance/widget/home/home_tiles.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  @override
  HomeScreenState createState() {
    return new HomeScreenState();
  }
}

class HomeScreenState extends State<HomeScreen> {
  int _page = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Background(child: _getCorrectPage()),
        bottomNavigationBar: BottomNavigation(onPageSelected: onPageSelected));
  }

  void onPageSelected(int index) {
    setState(() {
      _page = index;
    });
  }

  Widget _getCorrectPage() {
    switch (_page) {
      case 0:
        return HomeTiles();
      case 1:
        return HistoryPage();
      case 2:
        return UsersPage();
    }
    return Container();
  }
}

给定的代码就是我现在所拥有的。我拍了第一张照片。这段代码（我对高度值进行了硬编码），所以我知道我的其他小部件HomeItem可以正常工作：

import 'package:flutter/material.dart';

class HomeTiles extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 798,
        child: Column(mainAxisSize: MainAxisSize.max, children: [
          Container(
              height: (798 / 2) - 8,
              child: Row(children: [
                Expanded(
                    child: HomeItem(
                        title: Localization.of(context).homeExercises,
                        icon: Icons.fitness_center,
                        color: ThemeColors.blueColor)),
                Padding(padding: EdgeInsets.only(left: ThemeDimens.padding)),
                Expanded(
                    child: HomeItem(
                        title: Localization.of(context).homeDiet,
                        icon: Icons.restaurant_menu,
                        color: ThemeColors.greenColor))
              ])),
          Padding(padding: EdgeInsets.only(top: ThemeDimens.padding)),
          Container(
              height: (798 / 2) - 8,
              child: Row(
                children: [
                  Expanded(
                      child: HomeItem(
                          title: Localization.of(context).homeTimer,
                          icon: Icons.timer,
                          color: ThemeColors.redColor)),
                  Padding(padding: EdgeInsets.only(left: ThemeDimens.padding)),
                  Expanded(
                      child: HomeItem(
                          title: Localization.of(context).homeMyClub,
                          icon: Icons.home,
                          color: ThemeColors.orangeColor)),
                ],
              ))
        ]));
  }
}

我整天都在网上搜索。而且我没有得到我真正想要的结果。你会怎么做？有解决方案吗？

Answer 1

尝试将元素放在Column中：

Container(
    color: Colors.white,
    child: Column(
           mainAxisSize: MainAxisSize.max,
           mainAxisAlignment: MainAxisAlignment.center,

并使用Column扩展Expanded中的每个元素

         children: [
                  Expanded(
                    child: Container(
                        child: Row(children: [
                      Expanded(
                          child: HomeItem(
                          ...

Answer 2

我将更喜欢使用Flexible。这是我的用户界面层次结构

  Column(mainAxisSize: MainAxisSize.max)
    Row(mainAxisSize: MainAxisSize.max)
      Flexible(flex: 1)
      Flexible(flex: 1)
    Row(mainAxisSize: MainAxisSize.max)
      Flexible(flex: 1)
      Flexible(flex: 1)