Установите пространство между элементами в строке Flutter

Question

код:

new Container(
          alignment: FractionalOffset.center,
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              new FlatButton(
                child: new Text('Don\'t have an account?', style: new TextStyle(color: Color(0xFF2E3233))),
              ),
              new FlatButton(
                child: new Text('Register.', style: new TextStyle(color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),),
                onPressed: moveToRegister,
              )
            ],
          ),
        ),  

А вот и результат:
https://www.dropbox.com/s/sxklyutyvbbura8/Screenshot_20181104-150928.png?dl=0

Как исправить, что два FlatButton элемента расположены рядом, без промежутка между центром ширины экрана?

Answer 1

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

    widget = Row (
    children: <Widget>[
      Spacer(flex: 20),
      Text(
        "Item #1",
      ),
      Spacer(),  // Defaults to flex: 1
      Text(
        "Item #2",
      ),
      Spacer(flex: 20),
    ]
  );

Answer 2

Использование MainAxisAlignment.spaceBetween

  new Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Text("Left"),
      Text("Right")
    ],
  ),

Answer 3

Попробуйте это

Container(
      alignment: FractionalOffset.center,
      child: Row(
        children: <Widget>[
          Expanded(flex: 1, child: Container(),), // remove 1
           FlatButton(
            padding: EdgeInsets.all(0.0), // remove all padding from button 1
            onPressed: () {},
            child: new Text('Don\'t have an account?', style: new TextStyle(color: Color(0xFF2E3233))),
          ),
           FlatButton(
            child: new Text('Register.', style: new TextStyle(color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),),
            onPressed: (){},
          ),
          Expanded(flex: 1, child: Container(),), // remove 2
        ],
      ),
    );

Вы можете удалить 1 и 2, если не хотите ставить пробелы слева и справа от кнопки.

Answer 4

MainAxisAlignment

start - Разместите детей как можно ближе к началу главной оси.

end - Расположите дочерние элементы как можно ближе к концу главной оси.

center - Разместите детей как можно ближе к середине главной оси.

spaceBetween - равномерно распределить свободное пространство между детьми.

spaceAround - равномерно распределить свободное пространство между детьми, а также половину этого пространства до и после первого и последнего ребенка.

spaceEvenly - Распределите свободное пространство равномерно между детьми, а также до и после первого и последнего ребенка.

Пример:

  child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text('Row1'),
          Text('Row2')
        ],
      )

Answer 5

Удаление пробела -:

new Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              GestureDetector(
                child: new Text('Don\'t have an account?',
                    style: new TextStyle(color: Color(0xFF2E3233))),
                onTap: () {},
              ),
              GestureDetector(
                onTap: (){},
                  child: new Text(
                'Register.',
                style: new TextStyle(
                    color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),
              ))
            ],
          ),

OR

GestureDetector(
            onTap: (){},
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Text('Don\'t have an account?',
                    style: new TextStyle(color: Color(0xFF2E3233))),
                new Text(
                  'Register.',
                  style: new TextStyle(
                  color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),
                )
              ],
            ),
          ),