How do I center a GridView.builder within a column?
- Align your
Container
to the center. - As kekub said, remove
Expanded
, as it will fill any remaining space on the main axis. - As nonybrighto said, add
shrinkWrap: true
to yourGridView
, so it won't fill all vertical space. - 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
.