0 votes

How do I center a GridView in Flutter?

I seek to make a small options menu with cards, and for this I am using a GridView.

My tree of widgets is as follows:

Center{

  Container{

    GridView{...}

  }

}

It should be noted that the Grid is called by the Container from a method that I created apart (to have the code accommodated ), is the show below

  @override
  Widget build(BuildContext context) {
    Scaffold(

      appBar: AppBar(
        ...
        ...
      ),

      body: Center(
        child: Container(    
          child: _cuadricula(context),
        ),
      ),
    );
  }

  Widget _cuadricula(context) {

    return  Align(

      child: GridView.count(
        children: _tarjetas()
      ),
    );
  }

The problem is that I want the GridView is centered on screen, (centered in the container which I show below), and it is not so!

I thought that the Center, which surrounds the Container would give the property to the Grid, but no, it only affects the Container, as you can see:

El Center centra al Container, pero no al GridView

Already tried:

  • Putting a widget Center that wraps around the Grid.
  • I also tried with the widget Align, but I have not achieved what I am looking for.
  • Same with the property Alignment of the Container, but not.

Any help will be grateful! I hope I can be of help.

1voto

diegoveloper Points 2227

To center the GridView just add Center as parent widget, and also the property shrinkWrap must be true.

Center(
 child: GridView.count(
        shrinkWrap: true,
        children: _tarjetas()
      ),
)

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X