How to center column and row item in Flutter?

Question

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?

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>[
....
....
....

Ned

Answer 1

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,

Woodley

Answer 2

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)

Disciplinary

Answer 3

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

mainAxisAlignment: MainAxisAlignment.spaceEvenly

Clef

Answer 4

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
      ]
    )
)

Sateia

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Paladin