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

Метод 1: использование SizedBox с бесконечной высотой
Один простой подход — использовать виджет SizedBox с бесконечным значением высоты. Это позволяет контейнеру расширяться и заполнять доступное вертикальное пространство. Вот пример:

Container(
  color: Colors.blue,
  child: SizedBox.expand(
    child: Text('Full-Height Container'),
  ),
)

Метод 2: использование Layout Builder
Виджет LayoutBuilder предоставляет доступ к ограничениям родительского виджета, позволяя вам создать контейнер нужной высоты. Вот пример:

LayoutBuilder(
  builder: (context, constraints) {
    return Container(
      height: constraints.maxHeight,
      color: Colors.green,
      child: Text('Full-Height Container'),
    );
  },
)

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

class FullHeightContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;

    return Container(
      height: screenHeight,
      color: Colors.yellow,
      child: Text('Full-Height Container'),
    );
  }
}

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