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:

Answer 1

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")
                   ],))

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

Answer 2

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',
          );
        }),