gridviewlayoutdartflutter

Flutter layout with grid at center


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


Solution

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