How to center column and row item in Flutter?
use like this
-
In Colum
child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [... . ]
-
In Row
child: Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [... . ]
If you want the whole table to be Centered
, use the mainAxisAlignment
property of Column
.
Column
mainAxisAlignment: MainAxisAlignment.center //Center Column contents vertically,
crossAxisAlignment: CrossAxisAlignment.center //Center Column contents horizontally,
Row
mainAxisAlignment: MainAxisAlignment.center //Center Row contents horizontally,
crossAxisAlignment: CrossAxisAlignment.center //Center Row contents vertically,
You can use Spacer
if you want fine grain control.
Column(
children: <Widget>[
Spacer(), // 1st spacer
Widget1(),
Widget2(),
Spacer(), // 2nd spacer
],
)
You can change flex
too using Spacer(flex:2)
If you want it to be like in the picture, use
mainAxisAlignment: MainAxisAlignment.spaceEvenly