MainAxisAlignment.space даже не работает

Question

Я попытался выровнять кнопки, и вот результат.Я пытаюсь получить 3 кнопки (влево, вниз, вправо), чтобы пространство равномерно, используя MainAxisAlignment.SpaceEvenly, но некоторые, как они все еще слипаются.Может ли кто-нибудь указать мне проблему, стоящую за этим, и как добиться желаемого результата?

Вот результат

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

Хорошо, если я понял, что вам нужно, у вас есть различные варианты.

Вы можете развернуть свой первый столбец во внешнем ряду, но таким образом у вас будет второй столбец вправо (вам нужноя думаю, что здесь есть отступы.

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

Я предлагаю вам использовать панель Flutter Outline, чтобы иметь представление о вашем дереве визуализации.

И это ваша реальная ситуация без расширения первого столбца:

Или вы можете просто добавить padding на ваши кнопки (для проверки используйте RaiseButton вместо пользовательской кнопки MovingButton, но вместо этого вы используете MovingButton)

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

или используйте ButtonBar вместо Row виджетаи добавьте тему для всех ваших кнопок.

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

Answer 2

поместите дочерние виджеты вашего ряда кнопок внутри контейнеров, у меня это сработало в подобных случаях