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?
This is what I got:
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?

