How do I center a GridView.builder within a column? How do I center a GridView.builder within a column? dart dart

How do I center a GridView.builder within a column?


  1. Align your Container to the center.
  2. As kekub said, remove Expanded, as it will fill any remaining space on the main axis.
  3. As nonybrighto said, add shrinkWrap: true to your GridView, so it won't fill all vertical space.
  4. Align the main axis of your last Column to the center.

You'll end up with something like this:

@overrideWidget build(context) {  return MaterialApp(    home: Scaffold(      body: Container(        alignment: Alignment.center,        decoration: BoxDecoration(          gradient: LinearGradient(            begin: Alignment.topLeft,            end: Alignment.bottomRight,            colors: [Color(0xfff6921e), Color(0xffee4036)],          ),        ),        child: GridView.builder(          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),          itemCount: damage.length,          shrinkWrap: true,          itemBuilder: (BuildContext context, index) {            return InkWell(              onTap: () {                setState(() {                  damage[index]++;                });              },              onLongPress: () {                setState(() {                  damage[index] = 0;                });              },              child: Container(                child: Column(                  mainAxisAlignment: MainAxisAlignment.center,                  children: <Widget>[                    Padding(                      padding: const EdgeInsets.all(15),                      child: Text(                        'Player ${index + 1}',                        style: TextStyle(                          color: Colors.white,                          fontSize: 20.0,                          fontWeight: FontWeight.bold,                        ),                      ),                    ),                    Text(                      damage[index].toString(),                      style: TextStyle(                        color: Colors.white,                        fontSize: 35.0,                        fontWeight: FontWeight.bold,                      ),                    ),                  ],                ),              ),            );          },        ),      ),    ),  );}

However, when you shrinkWrap, the Android's overscroll effect is going to get weird, since your GridView no longer uses the whole vertical space. I recommend changing GridView's physics to BouncingScrollPhysics.