Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 417
Ommand Avatar asked Nov 27 '22 20:11

Ommand


2 Answers

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,
    ),
  ),
like image 87
Doc Avatar answered Dec 04 '22 01:12

Doc


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'),
      ]),
    ));
like image 27
Anastasia Avatar answered Dec 04 '22 02:12

Anastasia