1

I have a gridview that I'd like to display in a non-specific height container. However, the gridview only shows up when I use container with a specified height. GridView goes invisible when I change Container to Expanded or Flexible.

Working Code:

return Container( //using container
  height: 250,    //with a specific height
  child: GridView.count(
    primary: false,
    padding: const EdgeInsets.all(0.0),
    crossAxisSpacing: 10.0,
    crossAxisCount: 2,
    children: <Widget>[
      const Text('He\'d have you all unravel at the'),
      const Text('Heed not the rabble'),
      const Text('Sound of screams but the'),
      const Text('Who scream'),
    ],
  ),
);

Non-working code:

return Expanded(
  child: GridView.count(
    primary: false,
    padding: const EdgeInsets.all(0.0),
    crossAxisSpacing: 10.0,
    crossAxisCount: 2,
    children: <Widget>[
      const Text('He\'d have you all unravel at the'),
      const Text('Heed not the rabble'),
      const Text('Sound of screams but the'),
      const Text('Who scream'),
    ],
  ),
);
nvoigt
  • 75,013
  • 26
  • 93
  • 142
NewbieCoder
  • 676
  • 1
  • 9
  • 32

3 Answers3

1

You have to expand into a Column Widget, it will takes all the available vertical space

return Column(
    children:<Widget>[
      Expanded(
        child: GridView.count(
          primary: false,
          padding: const EdgeInsets.all(0.0),
          crossAxisSpacing: 10.0,
          crossAxisCount: 2,
          children: <Widget>[
            const Text('He\'d have you all unravel at the'),
            const Text('Heed not the rabble'),
            const Text('Sound of screams but the'),
            const Text('Who scream'),
          ],
        ),
      )
    ]
);
Tom Rivoire
  • 627
  • 5
  • 6
0

The parent widget of gridview need to have a certain height. height: MediaQuery.of(context).size.height is one of the option if the container is not scrollable or similar answer has already been posted please refer the link.

Harshal Bhope
  • 26
  • 3
  • This will take up an entire screen. My gridview is just a section in my screen. I don't want it to take up an entire screen's height but rather let it expand when it's needed. – NewbieCoder Aug 21 '20 at 06:17
  • Try using `return SizedBox.expand(child: Container(child: GridView.count( ` – Harshal Bhope Aug 21 '20 at 06:37
0

set shrinkWrap: true inside GridView.

Harshit Pathak
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 30 '22 at 22:41