GridView.builder // Items are overflowing

Question

Problem: I want to use widget in my gridview builder, but the items in the grid keep overflowing.

Image (Code below):

Code:

This is the GriView.builder:

return Expanded(
    child: GridView.builder(
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
        padding: EdgeInsets.symmetric(
          horizontal: 27.w,
        ),
        physics: const BouncingScrollPhysics(
            parent: AlwaysScrollableScrollPhysics()),
        itemCount:
            Provider.of<MainElementList>(context).lookbackList.length,
        //
        itemBuilder: (context, index) {
          return HistoryThumb(
            index: index + 1,
            usedFrom: 'lookbackScreen',
          );
        }),

This is HistoryThumb, the widget that is dispalyed in the grid:

return Column(
  children: [
    //THIS IS THE CARD WITH THE DATE
    HistoryThumbHeader(displayDate: displayDate, usedFrom: usedFrom),
    //
    SizedBox(
      height: usedFrom == 'homeScreen' ? 7.h : 12.h,
    ),
    GestureDetector(
      onTap: () {
      //irrelevant
      },
      //THIS IS THE RECTANGLE
      child: ClipRRect(
        borderRadius: BorderRadius.circular(8.r),
        child: Container(
          padding: EdgeInsets.all(0),
          height: historyThumbSize,
          width: historyThumbSize,
          color: Provider.of<MainElementList>(context).allTasksDone(index)
              ? customColorScheme['Shade 2']
              : customColorScheme['Shade 1'],
          //
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
                  //irrelevant
            ],
          ),
        ),
      ),
    ),
  ],
);

What the design is supposed to look like in the end:

It gives me an error (I tried without the Expanded widget as well): Exception caught by rendering library ═════════════════════════════════ RenderBox was not laid out: RenderRepaintBoundary#c6297 relayoutBoundary=up3 NEEDS-PAINT 'package:flutter/src/rendering/box.dart': package:flutter/…/rendering/box.dart:1 Failed assertion: line 1929 pos 12: 'hasSize' The relevant error-causing widget was Column lib\screens\screen_lookback.dart:19 ════════════════════════════════════════════════════════════════════════════════ — Joe, Mar 15 '22 at 15:06
the gridview automatically adds a scrollview if the tiles go beyond the window view. try using GridTiles as child and load the contents using a List.generate — Golden Lion, Mar 15 '22 at 15:32

score 2 · Answer 1 · answered Mar 15 '22 at 15:13

I got it. For posterity, I needed to manually set the child aspect ratio. Code:

return Expanded(
    child: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, childAspectRatio: 0.689),
        padding: EdgeInsets.symmetric(
          horizontal: 27.w,
        ),
        physics: const BouncingScrollPhysics(
            parent: AlwaysScrollableScrollPhysics()),
        itemCount:
            Provider.of<MainElementList>(context).lookbackList.length,
        //
        itemBuilder: (context, index) {
          return HistoryThumb(
            index: index + 1,
            usedFrom: 'lookbackScreen',
          );
        }),

Golden Lion · Answer 2 · 2022-03-17T14:01:01.043

Try using a Gridtile and a list.generator . The gridtile displays a header with the date time. The header overlaps the card so padding of 100 moves the column down. The column is center horizontally and vertically. I expanded the mylist by index value to be 100 pixels in height and infinite on the width. Next I add a row with two text values: left side and right side and expand the row and stretch and evenly space the children. You must set the aspect ratio to adjust the size of the gridtile

 class Test_Gridview extends StatefulWidget {
  Test_Gridview({Key? key}) : super(key: key);

  @override
  State<Test_Gridview> createState() => _Test_GridviewState();
}

List<String> myList=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','v','x','y','z'];
class _Test_GridviewState extends State<Test_Gridview> {
var _crossAxisSpacing = 8;
    var _screenWidth = MediaQuery.of(context).size.width;
    var _crossAxisCount = 3;
    var _width = (_screenWidth - ((_crossAxisCount - 1) * _crossAxisSpacing)) /
        _crossAxisCount;
    var cellHeight = 600;
    var _aspectRatio = _width / cellHeight;
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(
        title: const Text('GridView'),
      ),
      body: GridView.count(
          crossAxisCount: 2,
          childAspectRatio: _aspectRatio,
          children: List.generate(myList.length, (index) {
              return GridTile(
                header: GridTileBar(title:Text(DateTime.now().toString()),backgroundColor: Colors.red,),
                child:Card(
                  child:SafeArea(
                    child: Padding(
            padding: const EdgeInsets.only(top: 100.0),
              child:Column(
                  crossAxisAlignment: CrossAxisAlignment.center ,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children:[
                    Container(color:Colors.yellow,width:double.infinity,height:100,child: Text(myList[index],textAlign:TextAlign.center,style:TextStyle(fontSize:20)),
                   SizedBox(height:20),
                   Expanded(child:Row(
                     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                     crossAxisAlignment: CrossAxisAlignment.stretch,
                     children: [
                     Text("Left Side"),Text("Right Side")
                   ],))

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

Expanded the Text and add a SingleChildScrollView

GridView.count(
          crossAxisCount: 2,
          childAspectRatio: _aspectRatio,
          children: List.generate(myList.length, (index) {
              return GridTile(
                header: GridTileBar(title:Text(DateTime.now().toString()),backgroundColor: Colors.red,),
                child:
                SingleChildScrollView(child:Container(color:Colors.yellow,width:double.infinity,height:1200,
                child:Card(
                  child:SafeArea(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 50.0),
                      child:Expanded(child:Column(
                        crossAxisAlignment: CrossAxisAlignment.center ,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children:[
                    
                    //Container(color:Colors.yellow,width:double.infinity,height:600,child: Text(myList[index],textAlign:TextAlign.center,style:TextStyle(fontSize:20)))
                    Expanded(child:Text(myList[index],textAlign:TextAlign.center,style:TextStyle(fontSize:20)))
                    ,
                   SizedBox(height:20),
                   Expanded(child:Row(
                     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                     crossAxisAlignment: CrossAxisAlignment.stretch,
                     children: [
                     Text("Left Side"),Text("Right Side")
                   ],))

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

Hey, adding a child aspect ratio the SliverGridDelegate seems to work as well, but I'll definetely keep this approach in mind. Thanks — Joe, Mar 15 '22 at 17:23
I added the aspect ratio. the aspect ratio determines the height and width of the gridtile — Golden Lion, Mar 16 '22 at 14:05

GridView.builder // Items are overflowing

2 Answers2