Flutter gridview inside listview

Question

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.

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: <Widget>[
        new Container(
          decoration: new BoxDecoration(color: Colors.grey[400]),
          child: new Column(
            children: <Widget>[
              new SizedBox(height: 15.0),
              new Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  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: <Widget>[
                new Container(
                  decoration:
                      new BoxDecoration(color: Colors.lightBlue[200]),
                  child: new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      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&ixid=eyJhcHBfaWQiOjEyMDd9&s=0891a99609bf6fdc48842101bef90d67&auto=format&fit=crop&w=500&q=60'),
                              ),
                            ),
                          ),
                        ),
                        onTap: () {
                          print('tapped');
                        });
                  },
                ),
                new SizedBox(height: 20.0),
              ],
            );
          },
        ),
      ],
    ),
  ),
);

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 expanded, set shrinkWrap to true but did not working. I've been searching through but still can't figure it out. Anyone know how to fix it?

EDIT:

 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: <Widget>[
        new SizedBox(height: 20.0),
        new Container(
            height: 60.0,
            color: Colors.blue,
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                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: <Widget>[
                  new Container(
                    height: 50.0,
                    color: Colors.green,
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        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),
                ],
              );
            },
          ),
        ),
      ],
    ),
  ),
);

Muhammad Adil · Accepted Answer · 2021-06-07 08:22:25Z

111

I have used a flutter GridView inside a ListView, both are vertical scrolling:

body: ListView(
  children: <Widget>[
    GridView.count(
      crossAxisCount: 3,
      physics: NeverScrollableScrollPhysics(), // to disable GridView's scrolling
      shrinkWrap: true, // You won't see infinite size error
      children: <Widget>[
        Container(
          height: 24,
          color: Colors.green,
        ),
        Container(
          height: 24,
          color: Colors.blue,
        ),
      ],
    ),
    // ...... other list children. 
  ],
),

You can use same approach for flutter horizontal ListView/GridView inside another ListView.

edited Jun 7, 2021 at 8:22

answered Dec 19, 2018 at 13:31

Muhammad Adil

4,6764 gold badges34 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dominique Over a year ago

I cannot drag/scroll the ListView when touching/dragging elements in the GridView when using this solution. I.e. if I have a GridView that is large enough to fill the screen, I cannot scroll the ListView at all any more. I have found that this can be fixed by adding "physics: ScrollPhysics()" to the GridView.

Muhammad Adil Over a year ago

yes and this will stop scrolling of GridView. and enable listview to scroll. You can do one more thing that is Use of CustomScrollView and inside that CustomScrollView you can use SliverGridView and SliverListView. Well i have updated my answer.

Mahesh Jamdade Over a year ago

don't forget to add shrinkWrap:true along with scrollphysics ,because if you directly add gridView inside listview then it will throw error since it cant detect where the gridview will end.even though shrinkwrap is expensive since it computes the size of the grid on scroll,but it solve s the problem

Jaswant Singh · Accepted Answer · 2018-08-10 04:15:24Z

28

You can try to use Horizontal scrolling lists inside a vertical scrolling list to achieve this type of layout easily.

In your horizontal list and vertical list put

shrinkWrap : true

Or

Wrap the lists inside an Expanded() widget

EDIT

This is how I used a List view inside another list view.

                     Container ( child : 
                        ListView.builder(
                            itemBuilder: (context, subMenuIndex) {
                              return Container(
                                padding: EdgeInsets.only(left: 20.0),
                                child: sideMenuStuff.sideMenuData.elementAt(mainIndex).menu.subMenu.elementAt(subMenuIndex).subSubMenu != null
                                    ? ExpansionTile(
                                  title: Text(sideMenuStuff.sideMenuData.elementAt(mainIndex).menu.subMenu.elementAt(subMenuIndex).zero.info.title,
                                  ),
                                  children: <Widget>[
                                    ListView.builder(
                                        shrinkWrap: true,
                                        itemCount: sideMenuStuff.sideMenuData.elementAt(mainIndex).menu.subMenu.elementAt(subMenuIndex).subSubMenu.length,                                     
                                        itemBuilder:
                                            (context, subSubMenuIndex) {
                                          return Container(
                                            padding: EdgeInsets.only(
                                                left: 40.0,
                                                top: 10.0,
                                                bottom: 10.0),
                                            child:
                                            GestureDetector(
                                              onTap:
                                                  () {
                                                Navigator
                                                    .pop(context);
                                                Navigator
                                                    .of(context)
                                                    .push(MaterialPageRoute(
                                                    builder: (context) =>
                                                        Products(
                                                            sideMenuStuff
                                                                .sideMenuData
                                                                .elementAt(
                                                                mainIndex)
                                                                .menu
                          ....
                          ....
                          );

edited Aug 10, 2018 at 4:15

answered Aug 9, 2018 at 18:58

Jaswant Singh

10.8k8 gold badges32 silver badges54 bronze badges

9 Comments

Daibaku Over a year ago

thank you for the answer and I changed gridview to horizontal listview but still gives me error says Horizontal viewport was given unbounded height can you tell what is wrong?

Daibaku Over a year ago

Thank you again but now gives me this Incorrect use of ParentDataWidget. Expanded widgets must be placed inside Flex widgets Where should I put Expanded? Because I have listview and under that I have listview and under that I have horizontal listview.

Daibaku Over a year ago

I just tried wrap parent listview which is first listview but still nothing shows up.

Jaswant Singh Over a year ago

I’ll post a code sample for you for better understandings

Daibaku Over a year ago

Thanks to your code, I was able to show what I wanted but if I scroll down I should see the number 5 category. but I can't see the 5 like the picture above(I edited). I wrapped every widget but as I scroll down "TOP5" doesn't disappear. Does this make sense to you? How can I fix it?

|

Sana'a Al-ahdal · Accepted Answer · 2019-11-30 23:07:37Z

21

when I used

 GridView.count(
      shrinkWrap: true,
      crossAxisCount: 2,
      physics: ScrollPhysics(),

the physics property , it worked with me

answered Nov 30, 2019 at 23:07

Sana'a Al-ahdal

1,8001 gold badge22 silver badges38 bronze badges

Comments

Ehsan Kalali · Accepted Answer · 2022-09-18 06:06:31Z

8

You shouldn't use shrikWrap in customScrollView. This code is recomended to create any list inside customSrollView:


  @override
  Widget build(BuildContext context) => Scaffold(
      body: CustomScrollView(slivers: [
            //custom widget
            SliverToBoxAdapter(child: YourContainer()),
            //horizontal list
            SliverToBoxAdapter(child: Container(
                  height: 55,
                  child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      itemCount: 10,
                      itemBuilder: (context, index) {
                        return YourItem();
                      })))
            ])),
            //grid list
            SliverGrid(
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2, mainAxisSpacing: 0, crossAxisSpacing: 0),
                delegate: SliverChildListDelegate(
                    List.generate(10, (index) => YourAnotherItem())))
          ]));

I hope this is useful.

edited Sep 18, 2022 at 6:06

answered Feb 17, 2022 at 10:02

Ehsan Kalali

5816 silver badges23 bronze badges

1 Comment

itzhar Over a year ago

should be the accepted answer. other solutions also work but could be rendered all grid items & cause memory bugs

Jitesh Mohite · Accepted Answer · 2020-08-11 11:09:18Z

physics: ScrollPhysics(), will do the trick if ListView/GridView not Scrolling, This may happen if Parent Widget is SingleChildScrollView or ListView/GridView which provide scrolling functionality to Parent Widget, not to Child Widget.

Solution:

Scaffold(
      backgroundColor: Colors.white,
      appBar: new AppBar(
        title: new Text('Search'),
      ),
      body: new ListView(
        shrinkWrap: true,
        physics: ScrollPhysics(),
        children: <Widget>[
          new SizedBox(height: 20.0),
          new Container(
            child: new ListView.builder(
              shrinkWrap: true,
              itemCount: 5,
              physics: ScrollPhysics(),
              itemBuilder: (context, index) {
                return new Column(
                  children: <Widget>[
                    new Container(
                      height: 50.0,
                      color: Colors.green,
                      child: new Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          new Icon(Icons.format_list_numbered,
                              color: Colors.white),
                          new Padding(
                              padding: const EdgeInsets.only(right: 5.0)),
                          new Text('List Item',
                              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 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'),
                            ),
                          );
                        },
                      ),
                    ),
                    new SizedBox(height: 20.0),
                  ],
                );
              },
            ),
          ),
        ],
      ),
    );

Output:

Is there any way to load dynamic data into each list items? @jitsm555

Akash Lilhare · Accepted Answer · 2021-11-18 13:06:14Z

2

I use this property to achieve the desired result

      shrinkWrap: true,
      physics: ScrollPhysics(),

answered Nov 18, 2021 at 13:06

Akash Lilhare

5651 gold badge7 silver badges13 bronze badges

Comments

Bhumika Maheta · Accepted Answer · 2023-04-05 06:29:41Z

        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(
      children: <Widget>[
        new SizedBox(height: 20.0),
        new Container(
          height: 60.0,
          color: Colors.blue,
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              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 ListView.builder(
          shrinkWrap: true,
          itemCount: 5,
          physics: NeverScrollableScrollPhysics(),
          itemBuilder: (context, index) {
            return new Column(
              children: <Widget>[
                new Container(
                  height: 50.0,
                  color: Colors.green,
                  child: new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      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),
              ],
            );
          },
        ),
      ],
    ),
  ),
);

Try this it's work perfect. I just only added physics: NeverScrollableScrollPhysics(), & it's work. Here, video link. drive.google.com/file/d/1Wxbsm3c2_IJCeDqoN6EQGRYLnht0GqrJ/…

Collectives™ on Stack Overflow

Flutter gridview inside listview

7 Answers 7

3 Comments

9 Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

9 Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related