MainAxisAlignment.spaceEvenly not working

Question

I tried to align the buttons and here is the result. I am trying the get the 3 buttons (left, down, right) to space evenly using MainAxisAlignment.SpaceEvenly, but some how they still stick together. Can someone point out for me the problem behind this and how to achieve the result I want?

Here is the result

new Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
 // 4 Buttons on left side
        new Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
// Up button
            new Row(
              children: <Widget>[
                MovingButton( 
                  name: new Text("Up"), 
                  channel: this.channel,
                ),
              ],
            ),
// 3 buttons that stick and needed to be space evenly
            new Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                MovingButton( 
                  name: new Text("Left"), 
                  channel: this.channel,
                ),
                MovingButton( 
                  name: new Text("Down"), 
                  channel: this.channel,
                ),
                MovingButton( 
                  name: new Text("Right"), 
                  channel: this.channel,
                ),
              ],
            ),
          ],
        ),

// attack button
        new Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            MovingButton( 
              name: new Text("Attack"), 
              channel: this.channel,
            ),
          ],
        ),
      ],
    ),

Answer 1

Well if I did understand what you need, you have various options.

You can expand your first column inside the outer row, but this way you sould have the second column all to the right (you need some padding here I guess).

new Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      // 4 Buttons on left side
      Expanded(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            // Up button
            new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                  child: new Text("Up"),
                ),
              ],
            ),
            // 3 buttons that stick and needed to be space evenly
            new Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                RaisedButton(
                  child: new Text("left"),
                ),
                RaisedButton(
                  child: new Text("Down"),
                ),
                RaisedButton(child: new Text("Right")),
              ],
            ),
          ],
        ),
      ),

      // attack button
      new Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          RaisedButton(child: new Text("Attack")),
        ],
      ),
    ],
  ),

I suggest you to use Flutter Outline panel to have a clue of your render tree.

And this is your actual situation without expanding the first column:

Or you could simply add padding to your buttons (used RaiseButton instead of your custom MovingButton to test it, but you use your MovingButton instead)

new Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      // 4 Buttons on left side
      new Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          // Up button
          new Row(
            children: <Widget>[
              RaisedButton(
                child: new Text("Up"),
              ),
            ],
          ),
          // 3 buttons that stick and needed to be space evenly
          new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 2),
                child: RaisedButton(
                  child: new Text("left"),
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 2),
                child: RaisedButton(
                  child: new Text("Down"),
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 2),
                child: RaisedButton(
                  child: new Text("Right")
                ),
              ),
            ],
          ),
        ],
      ),

      // attack button
      new Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          RaisedButton(
            child: new Text("Attack")
          ),
        ],
      ),
    ],
  ),

or use a ButtonBar instead of a Row widget and add a theme for all your button.

new Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      // 4 Buttons on left side
      new Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          // Up button
          new Row(
            children: <Widget>[
              RaisedButton(
                child: new Text("Up"),
              ),
            ],
          ),
          // 3 buttons that stick and needed to be space evenly
          new ButtonTheme(
            padding: EdgeInsets.symmetric(vertical: 0, horizontal: 8),
            child: new ButtonBar(
              children: <Widget>[
                RaisedButton(
                  child: new Text("left"),
                ),
                RaisedButton(
                  child: new Text("Down"),
                ),
                RaisedButton(
                  child: new Text("Right")
                ),
              ],
            ),
          ),
        ],
      ),

      // attack button
      new Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          RaisedButton(
            child: new Text("Attack")
          ),
        ],
      ),
    ],
  ),