CODEWITHSUNDEEP
gridflutter-layout
user9239214
user9239214

Reputation:

How to center column and row item in Flutter?

I have a small currency table. I didn't use grid. I used Column and rows. Problem is that items in rows is not showing in center as shown below in the Excel example. What widget do I have to use to make the items centered?

enter image description here

The Example codes:

return new Center(
  child: new Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      new Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Padding(
            padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
            child: new Icon(
              Icons.crop_rotate,
              color: Colors.white,
            ),
          ),
          new Padding(
            padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
            child: new Text("STG", style: mainHeadTextStyle),
          ),
          new Padding(
            padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
            child: new Text("EUR", style: mainHeadTextStyle),
          ),
          new Padding(
            padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
            child: new Text("USD", style: mainHeadTextStyle),
          ),
        ],
      ),
      new Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
....
....
....

Upvotes: 80

Views: 148752

Answers (4)

Dinesh Sharma
Dinesh Sharma

Reputation: 11

If still faced created we can use below and this will if use nested parent and child level data with column and row or dynamic row creation also.

var size = MediaQuery.of(context).size;//Context from build function
Container(
  width: size.width,
  child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
// Your content
      ]
    )
)

Upvotes: 1

Vinoth Kumar
Vinoth Kumar

Reputation: 13471

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,

Upvotes: 246

CopsOnRoad
CopsOnRoad

Reputation: 268384

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)

Upvotes: 23

Alexander Simonov
Alexander Simonov

Reputation: 299

If you want it to be like in the picture, use

mainAxisAlignment: MainAxisAlignment.spaceEvenly

Upvotes: 16

Related Questions