Flutter - How to display a GridView within an AlertDialog box?

Question

I'm trying to display a GridView of images to allow a user to pick from within a Dialog Box and I'm having rendering issues. My UI fades as if a view was appearing on top of it, but nothing displays. Here is my code...

Future<Null> _neverSatisfied() async {
    return showDialog<Null>(
      context: context,
      barrierDismissible: false, // user must tap button!
      child: new AlertDialog(
        title: new Text(
          'SAVED !!!',
          style:
          new TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
        ),
        content: new GridView.count(
            crossAxisCount: 4,
            childAspectRatio: 1.0,
            padding: const EdgeInsets.all(4.0),
            mainAxisSpacing: 4.0,
            crossAxisSpacing: 4.0,
            children: <String>[
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
            ].map((String url) {
              return new GridTile(
                  child: new Image.network(url, fit: BoxFit.cover, width: 12.0, height: 12.0,));
            }).toList()),
        actions: <Widget>[
          new IconButton(
              splashColor: Colors.green,
              icon: new Icon(
                Icons.done,
                color: Colors.blue,
              ),
              onPressed: () {
                Navigator.of(context).pop();
              })
        ],
      ),
    );
  }

Solution

The issue is that, the AlertDailog tries to get the intrinsic width of the child. But GridView being lazy does not provide intrinsic properties. Just try wrapping the GridView in a Container with some width.

Example:

Future<Null> _neverSatisfied() async {
  return showDialog<Null>(
    context: context,
    barrierDismissible: false, // user must tap button!
    child: new AlertDialog(
      contentPadding: const EdgeInsets.all(10.0),
      title: new Text(
        'SAVED !!!',
        style:
        new TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
      ),
      content: new Container(
        // Specify some width
        width: MediaQuery.of(context).size.width * .7,
        child: new GridView.count(
            crossAxisCount: 4,
            childAspectRatio: 1.0,
            padding: const EdgeInsets.all(4.0),
            mainAxisSpacing: 4.0,
            crossAxisSpacing: 4.0,
            children: <String>[
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
            ].map((String url) {
              return new GridTile(
                  child: new Image.network(url, fit: BoxFit.cover, width: 12.0, height: 12.0,));
            }).toList()),
      ),
      actions: <Widget>[
        new IconButton(
            splashColor: Colors.green,
            icon: new Icon(
              Icons.done,
              color: Colors.blue,
            ),
            onPressed: () {
              Navigator.of(context).pop();
            })
      ],
    ),
  );
}

You can read more about how intrinsic properties are calculated for different views here.

Hope that helps!

Comments

[SlimenTN]

Works fine, thank you! But can you explain what MediaQuery.of(context).size.width * .7 does exactly ?

[Hemanth Raj]

The MediaQuery provides the size property which holds the width and height of the screen. By doing * .7 on it, I'm getting 70% of width.

[LuckyLizard]

Nice, it also helped with nesting Scrollbar with Markdown widget into AlertDialog. I was sure wrapping it with Container would help, but setting the size based on screen dimensions wasn't that obvious. Thanks!