GridView inside Expanded not visible, only visible when using Container with a specified height

Question

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

Solution

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

Comments

[NewbieCoder]

Still doesn't work. The entire thing is blanked out.

[Tom Rivoire]

@NewbieCoder did you wrap this widget into another one (maybe a Center) ? I mean, my tree is Scaffold(...Column(...Expanded(...GridView.count(...))))

[NewbieCoder]

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.

[Admin]

Try using return SizedBox.expand(child: Container(child: GridView.count(

[Admin]

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.