title: Flutter gridview inside listview
body: <p>I'd like to build design like Ios app store like image below.
  What I'm trying to achieve is there are 5 top category and each category has grid that shows images.
  And I tried like this.</p>
  
  <p><a href="https://i.stack.imgur.com/JDQLS.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/JDQLS.jpg" alt="like this"></a></p>
  
  <pre><code>return new Scaffold(
    backgroundColor: Colors.white,
    appBar: buildBar(context),
    // wrap in gesture to dismiss keyboard
    body: new GestureDetector(
      behavior: HitTestBehavior.opaque,
      onPanDown: (detail) {
        FocusScope.of(context).requestFocus(new FocusNode());
      },
      child: new ListView(
        shrinkWrap: true,
        children: &lt;Widget&gt;[
          new Container(
            decoration: new BoxDecoration(color: Colors.grey[400]),
            child: new Column(
              children: &lt;Widget&gt;[
                new SizedBox(height: 15.0),
                new Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: &lt;Widget&gt;[
                    new Icon(Icons.invert_colors,
                        color: Colors.red, size: 45.0),
                    new Text('Top 5',
                        style: new TextStyle(
                            color: Colors.white,
                            fontSize: 25.0,
                            fontWeight: FontWeight.bold)),
                  ],
                ),
                new SizedBox(height: 15.0),
              ],
            ),
          ),
          new SizedBox(height: 30.0),
          new ListView.builder(
            shrinkWrap: true,
            itemCount: 5,
            itemBuilder: (BuildContext context, int index) {
              return new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: &lt;Widget&gt;[
                  new Container(
                    decoration:
                        new BoxDecoration(color: Colors.lightBlue[200]),
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: &lt;Widget&gt;[
                        new Icon(icons[index],
                            size: 30.0),
                        new Padding(
                            padding: const EdgeInsets.only(right: 5.0)),
                        new Text('Category',
                            style: new TextStyle(
                                fontSize: 23.0, fontWeight: FontWeight.bold)),
                      ],
                    ),
                  ),
                  new SizedBox(height: 5.0),
                  new GridView.builder(
                    shrinkWrap: true,
                    scrollDirection: Axis.horizontal,
                    itemCount: 10,
                    gridDelegate:
                        new SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 4),
                    itemBuilder: (BuildContext context, int index) {
                      return new GestureDetector(
                          child: new Card(
                            elevation: 5.0,
                            child: new Container(
                              padding: new EdgeInsets.only(
                                  bottom: 2.0, right: 3.0),
                              decoration: new BoxDecoration(
                                image: new DecorationImage(
                                  fit: BoxFit.cover,
                                  image: NetworkImage(
                                      'https://images.unsplash.com/photo-1505535162959-9bbcb4ab22d6?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=0891a99609bf6fdc48842101bef90d67&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60'),
                                ),
                              ),
                            ),
                          ),
                          onTap: () {
                            print('tapped');
                          });
                    },
                  ),
                  new SizedBox(height: 20.0),
                ],
              );
            },
          ),
        ],
      ),
    ),
  );
  </code></pre>
  
  <p>But grid view doesn't appear and if I commented out grid view then shows list that doesn't have images just category names.
  I tried to wrap <code>expanded</code>, set <code>shrinkWrap</code> to true but did not working.
  I've been searching through but still can't figure it out.
  Anyone know how to fix it?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <pre><code> return new Scaffold(
    backgroundColor: Colors.white,
    appBar: new AppBar(
      title: new Text('Search'),
    ),
    body: new GestureDetector(
      behavior: HitTestBehavior.opaque,
      onPanDown: (detail) {
        print(detail);
        FocusScope.of(context).requestFocus(new FocusNode());
      },
      child: new ListView(
        shrinkWrap: true,
        children: &lt;Widget&gt;[
          new SizedBox(height: 20.0),
          new Container(
              height: 60.0,
              color: Colors.blue,
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: &lt;Widget&gt;[
                  new Icon(Icons.hourglass_empty,
                      color: Colors.white, size: 30.0),
                  new Padding(padding: const EdgeInsets.only(right: 5.0)),
                  new Text('TOP5',
                      style:
                          new TextStyle(color: Colors.white, fontSize: 23.0)),
                ],
              ),
            ),
            new SizedBox(height: 20.0),
          new Container(
            child: new ListView.builder(
              shrinkWrap: true,
              itemCount: 5,
              itemBuilder: (context, index) {
                return new Column(
                  children: &lt;Widget&gt;[
                    new Container(
                      height: 50.0,
                      color: Colors.green,
                      child: new Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: &lt;Widget&gt;[
                          new Icon(Icons.format_list_numbered,
                              color: Colors.white),
                          new Padding(
                              padding: const EdgeInsets.only(right: 5.0)),
                          new Text(arr[index],
                              style: new TextStyle(
                                  fontSize: 20.0, color: Colors.white)),
                        ],
                      ),
                    ),
                    new Container(
                      height: 150.0,
                      child: new ListView.builder(
                        shrinkWrap: true,
                        scrollDirection: Axis.horizontal,
                        itemCount: 10,
                        itemBuilder: (context, index) {
                          return new GestureDetector(
                            child: new Card(
                              elevation: 5.0,
                              child: new Container(
                                height: MediaQuery.of(context).size.width / 3,
                                width: MediaQuery.of(context).size.width / 3,
                                alignment: Alignment.center,
                                child: new Text('Item $index'),
                              ),
                            ),
                            onTap: () {
                              print(123);
                            },
                          );
                        },
                      ),
                    ),
                    new SizedBox(height: 20.0),
                  ],
                );
              },
            ),
          ),
        ],
      ),
    ),
  );
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/6bGw8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6bGw8.png" alt="enter image description here"></a></p>