Установите пространство между элементами в строке Flutter - программирование
Подтвердить что ты не робот

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

Код: 

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 расположены рядом, без промежутка между центром ширины экрана?

4b9b3361

ОТВЕТЫ

Ответ 1

Удаление Space-:

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

ИЛИ ЖЕ

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

Ответ 2

MainAxisAlignment

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

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here

Пример:

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

Попробуй это

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, если вы не хотите оставлять пробелы слева и справа от кнопки.

Ответ 6

Используйте пробел в тексте

Text(' '),

Это должно сделать работу.