Ad

Nested GridView In Flutter

I am trying to build a nested list using GridView builder in flutter. But the child list has a very small height. Since I have not specified height for any of the list, I'm not able to figure out how to increase it.


This is code I'm using to build the nested list.

    return DecoratedBox(
      decoration: const BoxDecoration(
        color: Styles.scaffoldBackground,
      ),
      child: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            _buildSearchBox(),
          Expanded(
            child:GridView.builder(
                shrinkWrap: true,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 1,
                  childAspectRatio: 3/1,
                  crossAxisSpacing: 20,
                  mainAxisSpacing:50),
                padding: const EdgeInsets.all(10.0),
                itemCount: res2.length,
                itemBuilder: (context, index) => ChangeNotifierProvider.value(
       
                  value: res2[index],
                  child:Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children:<Widget>[

                    GestureDetector(
                    onTap: (){
                      Navigator.push(
                          context, MaterialPageRoute(builder: (context) => ProductOverview()));

                    },
                    child: shopItem(),),
                  Expanded(
                    child:Container(
                      height: 10*_blockSizeVertical,
                    child:GridView.builder(
                    physics: ClampingScrollPhysics(),
                    shrinkWrap: true,
                  padding: const EdgeInsets.all(10.0),
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 1,
                          childAspectRatio: 3/1,
                          crossAxisSpacing: 20,
                          mainAxisSpacing: 20),
                     itemCount: results.length,
                       itemBuilder: (context, index) => ChangeNotifierProvider.value(
                      value: results[index],
                        child: productItem(
                ),

              ),

            ),),),],),
                ),),),
],
      ),
    ),);
  }

Screenshot of the list:

img

Ad

Answer

Change the childAspectRatio of the parent GridView. It takes width/height.

Change it to childAspectRatio: 3/6 ;

Ad
source: stackoverflow.com
Ad