В Flutter виджет «Строка» — это мощный инструмент для горизонтального расположения дочерних виджетов. Если вы хотите добавить виджеты справа и в центре строки, для этого можно использовать несколько методов. В этом руководстве мы рассмотрим несколько подходов с примерами кода, которые помогут вам понять различные доступные методы.

Метод 1: использование MainAxisAlignment и CrossAxisAlignment

Один из способов добавить виджет справа, а другой в центре строки — использовать свойства MainAxisAlignment и CrossAxisAlignment виджета строки.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.green,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
  ],
)

В этом примере свойство MainAxisAlignment.spaceBetween размещает дочерние виджеты на одинаковом расстоянии между ними. Первый и последний контейнеры будут расположены по правому и левому краю соответственно, а средний контейнер будет в центре.

Метод 2: использование расширенного и гибкого вариантов

Другой метод предполагает использование виджетов «Расширенный» и «Flex» в сочетании с виджетом «Flex». Виджет Flex позволяет управлять выравниванием дочерних виджетов внутри строки.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
    Expanded(
      flex: 2,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    ),
    Expanded(
      flex: 1,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)

В этом примере виджет «Расширенный» используется для распределения доступного пространства между дочерними виджетами на основе значения flex. Регулируя значения гибкости, вы можете контролировать выравнивание виджетов.

Метод 3: использование виджета-разделителя

Виджет «Распорка» — это удобный способ добавить гибкое пространство между виджетами в строке. Комбинируя виджеты Spacer с другими виджетами, вы можете добиться желаемого выравнивания.

Row(
  children: [
    Spacer(),
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Spacer(flex: 2),
    Container(
      width: 100,
      height: 100,
      color: Colors.green,
    ),
    Spacer(),
  ],
)

В этом примере виджеты Spacer используются для создания пространства до и после красного и зеленого контейнеров соответственно. Регулируя значение гибкости виджета «Распорка», вы можете контролировать объем пространства.

В этом уроке мы рассмотрели несколько способов добавления виджетов справа и в центре строки во Flutter. Используя такие свойства, как MainAxisAlignment, CrossAxisAlignment, Expanded, Flex и Spacer, вы можете добиться желаемого выравнивания и расположения ваших виджетов. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует вашим требованиям.

Не забудьте импортировать необходимые пакеты Flutter и настроить свойства виджета в соответствии с вашими конкретными потребностями. Приятного кодирования!