Создание строки с двумя дочерними элементами во Flutter

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

Метод 1: использование строк и расширенных виджетов

Row(
  children: [
    Expanded(
      child: Container(
        height: 100,
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)

Метод 2: использование виджета FractionallySizedBox

Row(
  children: [
    FractionallySizedBox(
      widthFactor: 0.5,
      child: Container(
        height: 100,
        color: Colors.red,
      ),
    ),
    FractionallySizedBox(
      widthFactor: 0.5,
      child: Container(
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)

Метод 3: использование SizedBox и расширенных виджетов

Row(
  children: [
    SizedBox(
      width: MediaQuery.of(context).size.width / 2,
      child: Container(
        height: 100,
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)

Метод 4. Использование гибкого виджета

Row(
  children: [
    Flexible(
      flex: 1,
      child: Container(
        height: 100,
        color: Colors.red,
      ),
    ),
    Flexible(
      flex: 1,
      child: Container(
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)

Метод 5. Использование LayoutBuilder и виджетов-контейнеров

Row(
  children: [
    LayoutBuilder(
      builder: (context, constraints) {
        return Container(
          width: constraints.maxWidth / 2,
          height: 100,
          color: Colors.red,
        );
      },
    ),
    LayoutBuilder(
      builder: (context, constraints) {
        return Container(
          width: constraints.maxWidth / 2,
          height: 100,
          color: Colors.blue,
        );
      },
    ),
  ],
)

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