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:

CodePudding user response：

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

CodePudding user response：

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.

 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> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(
        title: const Text('GridView'),
      ),
      body: GridView.count(
          crossAxisCount: 2,
          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")
                   ],))

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