How to make a grid of 4 that fits remaining space in Flutter

Viewed 2485

I am trying to make a widget that looks like the following design. I can't seem to figure out how I can make my items grow. In android I would use match_parent. But that is something I can't figure out how it needs to be implemented?

My design

This is what I got:

enter image description here

My Custom Widget

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)),
                ],
              ))
        ]));
  }
}

This is the parent of the HomeTiles widget:

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();
  }
}

The given code is what I have right now. I got the first picture taken. with this code (I hardcoded the height values) So I know my other widget HomeItem works perfectly:

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)),
                ],
              ))
        ]));
  }
}

I am searching the web all day. And I did nog get the results I really want. What would you do? Is there a solution for this?

2 Answers

Try center your elements inside your Column:

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

And expand each element inside your Column using Expanded

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

I will prefer to use Flexible. Here is my UI hierarchy

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