I'm trying to create a Flutter layout with 6x6 square table (grid) at the center of the screen and some elements above/below the grid. What is the best way to do so?
I've implemented centered grid as
Center() => AspectRatio(aspectRatio: 1) => GridView();
but how to place the rest elements? I thought about using Stack() but decided that this is not the best solution. Or should I do this using Row() widget, and if so, how do I align second child of the row in center?
Thanks for your help!
UPD: Here's the picture of what I meant to do. I want to place two more containers below and above the grid and want them to fill all available space
There is a very simple way.
Just set shrinkWrap: true
which makes the GridView
to take minimum space and wrap the GridView
with Center
widget.
body: Center(
child: GridView.count(
shrinkWrap: true,
crossAxisCount: 4,
children: childrenWidgets,
childAspectRatio: r,
),
),
That's how I did it using Column widget to align elements below and above the grid and Expanded to make Grid visible in the Column widget:
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(children: [
new Text('app'),
new Expanded(
child: new Center(
child: new Container(
height: [EXPECTED_GRID_HEIGHT],
child: GridView.count(
padding: const EdgeInsets.all(20.0),
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0,
crossAxisCount: 4,
children: [GRID_ELEMENTS],
)))),
new Text('app'),
]),
));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With