Flutter wrap widget in listview

Question

I'd like to wrap column in listview so that as scroll down, search bar will disappear. I tried like this

new ListView(
   shrinkWrap: true,
    children: <Widget>[
       new Column(
         mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            new GestureDetector(
              child: new Container(
                color: Colors.grey[300],
                child: new Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: new Card(
                    margin: const EdgeInsets.fromLTRB(4.0, 0.0, 4.0, 0.0),
                    child: new ListTile(
                      leading: new Icon(Icons.search),
                      title: new Text('Search',
                          style: new TextStyle(color: Colors.grey[600])),
                    ),
                  ),
                ),
              ),
              onTap: () {
                print(
                    'tapped');
              },
            ),
            new GridView.builder(
              itemCount: items.length,
              gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2),
              itemBuilder: (BuildContext context, int index) {
                return new GestureDetector(
                  child: new Card(
                    elevation: 5.0,
                    child: new Container(
                      decoration: new BoxDecoration(
                        image: new DecorationImage(
                          fit: BoxFit.cover,
                          image: NetworkImage(
                              'https://images.unsplash.com/photo-1533514114760-4389f572ae26?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4ada6181447db788f0fc94d5d2e35c63&auto=format&fit=crop&w=500&q=60'),
                        ),
                      ),
                    ),
                  ),
                  onTap: () {
                    showDialog(
                      barrierDismissible: false,
                      context: context,
                      child: new AlertDialog(
                        title: new Column(
                          children: <Widget>[
                            new Text("GridView"),
                            new Icon(
                              Icons.favorite,
                              color: Colors.green,
                            ),
                          ],
                        ),
                        content: new Text("Selected Item $index"),
                        actions: <Widget>[
                          new FlatButton(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              child: new Text("OK"))
                        ],
                      ),
                    );
                  },
                );
              },
            ),
          ],
        ),
    ],
  ),

But list view is invisible and console says

Vertical viewport was given unbounded height. Viewports expand in the scrolling direction to fill their container.

I tried insert expanded and shrinkwrap but still shows nothing. Anyone know how to fix this?

Answer 1

You don't need a column for your Search Field widget, just use directly. Remove from your parent ListView the shrinkWrap. Add shrinkWrap to your GridView and also specify the physics :

    new ListView(children: <Widget>[
              new GestureDetector(
                  child: new Container(
                    color: Colors.grey[300],
                    child: new Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: new Card(
                        margin: const EdgeInsets.fromLTRB(4.0, 0.0, 4.0, 0.0),
                        child: new ListTile(
              leading: new Icon(Icons.search),
              title: new Text('Search',
                  style: new TextStyle(color: Colors.grey[600])),
                        ),
                      ),
                    ),
                  ),
                  onTap: () {
                    print('tapped');
                  },
                ),
              GridView.builder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount: items.length,
                gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2),
                itemBuilder: (BuildContext context, int index) {
                  return new GestureDetector(
                    child: new Card(
                      elevation: 5.0,
                      child: new Container(
                        decoration: new BoxDecoration(
                          image: new DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage(
                                'https://images.unsplash.com/photo-1533514114760-4389f572ae26?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4ada6181447db788f0fc94d5d2e35c63&auto=format&fit=crop&w=500&q=60'),
                          ),
                        ),
                      ),
                    ),
                    onTap: () {
                      showDialog(
                        barrierDismissible: false,
                        context: context,
                        child: new AlertDialog(
                          title: new Column(
                            children: <Widget>[
                              new Text("GridView"),
                              new Icon(
                                Icons.favorite,
                                color: Colors.green,
                              ),
                            ],
                          ),
                          content: new Text("Selected Item $index"),
                          actions: <Widget>[
                            new FlatButton(
                                onPressed: () {
                                  Navigator.of(context).pop();
                                },
                                child: new Text("OK"))
                          ],
                        ),
                      );
                    },
                  );
                },
              )
            ]
            )