Flutter gridview inside listview

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
                          ....
                          ....
                          );

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.

Tags:

Flutter