Введение
В этом параграфе мы поговорим о лейауте во Flutter — это процесс при котором определяются размеры (Size) и позиция виджетов на экране.
Также мы рассмотрим, что такое констрейнты (BoxConstraints), посмотрим основные layout-виджеты, и разберёмся, с какими ошибками вы можете столкнуться во время вёрстки, почему они возникают, и как их решать.
Подход к лейауту во Flutter отличается от подходов в html/css или нативной мобильной разработке. Сначала он может показаться странным и неудобным, но это дело привычки — если изучить основные принципы все становится понятным и легким.
Давайте рассмотрим небольшой пример:
class MyApp extends StatelessWidget {
static const appTitle = 'Flutter Handbook Demo';
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: appTitle,
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: Container(
color: Colors.red,
width: 100.0,
height: 100.0,
),
);
}
}
Мы добавляем виджет Container , задаем ему красный фон и указываем размер 100 на 100.
Как вы думаете что будет выведено на экран?
Результат
Странно – почему-то виджет Container получился размером не 100 на 100, а на весь экран.
Во Flutter есть специальный виджет SizedBox – это виджет который задает размер для дочернего виджета (подробней о нем поговорим далее).
Давайте попробуем обернуть наш Container в виджет SizedBox размером 100 на 100 и посмотрим, что из этого получится:
class MyApp extends StatelessWidget {
static const appTitle = 'Flutter Handbook Demo';
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: appTitle,
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: SizedBox(
height: 100.0,
width: 100.0,
child: Container(
color: Colors.red,
width: 100.0,
height: 100.0,
),
),
);
}
}
Запускаем приложение и видим ту же самую проблему — виджет Container вновь занимает весь экран.
А теперь давайте попробуем обернуть наш Container в виджет Center и посмотрим изменится ли что-нибудь:
class MyApp extends StatelessWidget {
static const appTitle = 'Flutter Handbook Demo';
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: appTitle,
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: Center(
child: Container(
color: Colors.red,
width: 100.0,
height: 100.0,
),
),
);
}
}
Как видим виджетContainer наконец-то принял желаемый размер. Давайте разберёмся, почему так происходит.
Процесс лейаута во Flutter
Процесс лейаута во Flutter устроен следующим образом — при построении дерева виджетов от родителя к детям передаются констрейнты (BoxConstraints) — это ограничения для размера (Size) в границах которых ребенок может определить свой размер, родители в ответ получают размер (Size) и позиционируют детей.
Таким образом для расчета лейаута производится два прохода — один проход вниз по дереву при котором передаются констрейнты (BoxConstraints) и один проход вверх по дереву при котором возвращаются полученные размеры (Size).
На самом деле есть исключения при которых происходит как меньше, так и больше проходов, но подробнее об этом поговорим далее
Что из себя представляют Size и BoxConstraints
Давайте разберемся что же из себя представляют Size и BoxConstraints.
Size — класс который описывает размер, содержит два поля width и height.
BoxConstraints — это класс который описывает возможные размеры виджета, а именно минимальную и максимальную ширину (параметры minWidth и maxWidth ), а также минимальную и максимальную высоту (параметры minHeight и maxHeight ).
Констрейнты можно разделить по строгости значений на:
- loose — когда минимальная ширина и высота равны нулю, а максимальная ширина и высота имеют конкретное значение, не равное нулю. Иными словами это гибкие констрейнты, которые предоставляют дочернему виджету выбор в определенных пределах (например при
BoxConstraints.loose(const Size(200.0, 300.0))размеры виджета могут быть следующими0 <= width <= 200.0и0 <= height <= 300.0); - tight — когда минимальная ширина равна максимальной и минимальная высота равна максимальной высоте. Иными словами это негибкие констрейнты, которые заставляют виджет быть определенного размера (например при
BoxConstraints.tight(const Size(200.0, 300.0))размеры виджета будут следующимиwidth = 200.0иheight = 300.0);
Стоит отметить, что констрейнты могут быть различными по ширине и высоте — например, loose по ширине и tight по высоте.
Также констрейнты можно разделить по пределу значений на:
- unbounded — когда максимальная ширина и/или максимальная высота равны бесконечности (
double.infinity). Иными словами это гибкие констрейнты, которые определяют только минимальную ширину и/или высоту для дочернего виджета, не задавая при этом максимального предела (значенияSizeв таком случае будут находится в следующих пределах200.0 <= width <= ∞и300.0 <= height <= ∞). - bounded — когда максимальная ширина и максимальная высота не равны бесконечности(
double.infinity).
А теперь давайте, рассмотрим что происходило в нашем примере с красным контейнером.
В первом примере Container был растянут на весь экран — это произошло потому что виджет MaterialApp отдает tight BoxConstraints которые равны размеру экрана. Это особенность работы виджета MaterialApp - он обязует виджет который мы передаем в качестве главного экрана home быть на весь экран.
Во втором примере произошло то же самое — SizedBox и вложенный в него Container были растянуты на весь экран, а в примере с Center наоборот сработало. Чтобы понять почему это произошло надо взглянуть на то какие значения BoxConstraints были переданы контейнеру в каждом из случаев.
Главное правило лейаута — если какой-то из виджетов принимает неправильный размер, то первым делом стоит обратить внимание не на параметры этого виджета, а на родительский виджет и BoxConstraints, которые он передаёт
Инспектируем BoxConstraints с помощью DevTools
Во Flutter есть инструмент, который позволяет инспектировать констрейнты виджетов приложения запущенного в debug / profile режимах, — это DevTools.
Давайте рассмотрим наш пример с виджетом Center и воспользуемся DevTools.
Запускаем DevTools, выбираем вкладку LayoutExplorer, затем в окне WidgetTree выбираем наш виджет Center и видим следующее:
Виджет Center получил от MaterialApp tight-констрейнты размером 430 на 932 (констрейнты указаны в скобках w = 430.0 и h = 932.0, ширина и высота определены строго, поэтому значения констрейнтов tight), сам Center определил свой размер соответственно 430 на 932 (указано над скобками w = 430.0 и h = 932.0).
Теперь давайте выберем виджет Container и посмотрим какие у него констрейнты и размер:
Виджет Container получил от Center loose-констрейнты размером 0<=430 на 0<=932 (констрейнты указаны в скобках 0 <= w <= 430.0 и 0 <= h <= 932.0).
Это означает, что Container может быть любого размера в пределах данных значений: в результате размеры Container определились как 100 на 100 (указано над скобками w = 100.0 и h = 100.0), в соответствии с переданными width и height.
Рассмотрев пример с использованием DevTools, мы видим что действительно размер виджета определяется следующим образом в зависимости от констрейнтов:
- когда виджет получает tight-констрейнты, то его ширина и/или высота будут точно им соответствовать;
- когда виджет получает loose-констрейнты, то его ширина и/или высота будет в их диапазоне.
Определяем BoxConstraints с помощью виджета LayoutBuilder
Бывают случаи, когда нам необходимо знать констрейнты не во время дебага приложения, а в рантайме — например, в зависимости от текущих констрейнтов по-разному строить дерево виджетов. Для таких случаев нам не подойдет DevTools, и стоит воспользоваться LayoutBuilder.
LayoutBuilder — виджет, который вызывает специальный callback (builder) на каждое изменение констрейнтов, при этом в качестве аргумента передается контекст и значение текущих констрейнтов. Результатом вызова builder должен быть виджет который будет встроен в дерево виджетов.
Давайте взглянем на простой пример использования LayoutBuilder – на каждый вызов выводим в консоль значение констрейнтов:
class MyApp extends StatelessWidget {
static const appTitle = 'Flutter Handbook Demo';
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: appTitle,
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: Center(
child: LayoutBuilder(builder: (context, constraints) {
print(constraints);
return Container(
color: Colors.red,
width: 100.0,
height: 100.0,
);
}),
),
);
}
}
При запуске приложения мы увидим, что на каждый build в консоль будет выводиться следующее flutter: BoxConstraints(0.0<=w<=430.0, 0.0<=h<=932.0) – это констрейнты которые мы получаем от родительского виджета Center.
Знания о текущих констрейнтах обычно нам нужны для адаптивной верстки — когда в зависимости от констрейнтов мы хотим по-разному скомпоновать виджеты, например для portrait- и landscape-ориентации или для разных размеров экранов.
Для работы с portrait- и landscape-ориентациями есть специальный виджет OrientationBuilder, который построен на базе LayoutBuilder.
Основные layout-виджеты
Мы уже знаем что такое констрейнты и как работает расчет лейаута во Flutter, давайте рассмотрим как работают некоторые отдельные виджеты.
Align
Align — виджет, который позволяет спозиционировать дочерний виджет относительно себя.
Если Align имеет bounded-констрейнты, то он занимает максимально доступное место, если находится в unbounded-констрейнтах, то становится размером с дочерний виджет в тех направлениях в которых имеет unbounded значение констрейнта. У Align есть два параметра widthFactor и heightFactor, которые позволяют задать размер Align пропроционально размеру дочернего виджета, а также есть параметр alignment (AlignmentGeometry, Alignment или AlignmentDirectional), который определяет, где именно нужно спозиционировать дочерний виджет.
Расскажем о них подробнее.
AlignmentGeometry — базовый абстрактный класс, у которого определены два поля x и y. Эти два поля задают положение дочернего виджета следующим образом
- (0.0, 0.0) — дочерний виджет будет по-центру;
- (-1.0, -1.0) — дочерний виджет будет в верхнем-левом углу;
- (1.0, 1.0) — дочерний виджет будет в нижнем-право углу.
Alignment — класс, который позволяет задать основные позиции для дочернего виджета без учёта направления текста в приложении (в некоторых языках направление текста идет справа налево). Вот все возможные значения Alignment (сперва выравнивание по вертикали, потом — по горизонтали) - bottomCenter, bottomLeft, bottomRight, center, centerLeft, centerRight, topCenter, topLeft, topRight.
AlignmentDirectional — класс, который позволяет задать основные позиции для дочернего виджета с учетом направления текста которое используется в приложении. Вот все возможные значения AlignmentDirectional (сперва выравнивание по вертикали, потом — по горизонтали) - bottomCenter, bottomEnd, bottomStart, center, centerEnd, centerStart, topCenter, topEnd, topStart.
Пример использования Align — размещаем виджет сверху-справа:
home: Align(
alignment: Alignment.topRight,
child: Container(
color: Colors.red,
width: 100.0,
height: 100.0,
),
),
Center
Center — виджет-обертка над Align. Работает точно так же как Align, но позиционирует дочерний виджет всегда по центру.
ConstrainedBox
ConstrainedBox — виджет, который позволяет переопределять констрейнты для дочернего виджета, но только в рамках тех, что приходят от родителя.
При этом мы можем «сузить» констрейнты, т.е. не можем выходить за пределы внешних констрейнтов, например констрейнт 100≤размер≤200 мы можем переопределить как 125≤размер≤175, но не можем переопределить как 0≤размер≤300.
Пример использования ConstrainedBox за пределами текущих констрейнтов — пытаемся переопределить констрейнты для Container:
home: ConstrainedBox(
constraints: BoxConstraints.tight(Size(100, 100.0)),
child: Container(
color: Colors.red,
width: 100.0,
height: 100.0,
),
),
Как мы видим Container все так же растягивается на весь экран т.к. мы не можем переопределить констрейнты которые не вписываются в текущие.
Пример использования ConstrainedBox в пределах текущих констрейнтов — пытаемся переопределить констрейнты для Container:
home: Center(
child: ConstrainedBox(
constraints: BoxConstraints.tight(Size(50.0, 50.0)),
child: Container(
color: Colors.red,
width: 100.0,
height: 100.0,
),
),
),
Как видим, Container принимает размер 50х50 в соответствии с констрейнтами из ConstrainedBox, несмотря на переданные в него параметры width и height.
UnconstrainedBox
UnconstrainedBox — виджет, который убирает текущие констрейнты для дочернего виджета и позволяет дочернему виджету быть любого размера.
У UnconstrainedBox есть уже знакомый нам параметр alignment (AlignmentGeometry, Alignment или AlignmentDirectional), а также особый параметр constrainedAxis (Axis). С помощью constrainedAxis можно задать конкретную ось, по которой будут игнорироваться констрейнты. По-умолчанию констрейнты будут игнорироваться по обоим осям.
UnconstrainedBox используется довольно редко, об одном из примеров использования команда Flutter рассказала в следующем ролике:
Пример использования UnconstrainedBox — убираем констрейнты для Container:
home: UnconstrainedBox(
child: Container(
color: Colors.red,
width: 100.0,
height: 100.0,
),
),
Как мы видим Container принимает желаемый размер, однако использование данного виджета может привести к ошибке — мы можем выйти за пределы доступных границ.
Пример использования UnconstrainedBox — выход за пределы доступных границ:
home: UnconstrainedBox(
child: Container(
color: Colors.red,
width: 1000.0,
height: 1000.0,
),
),
В данном примере Container также принимает желаемый размер, но при этом возникает ошибка т.к. виджет не умещается.
OverflowBox
OverflowBox — виджет, который работает точно так же, как и UnconstrainedBox, но не вызывает ошибку если дочерний виджет не умещается.
Большинство ошибок в верстке возникают именно при работе с unbounded-констрейнтами стоит особое внимание уделять виджетам которые отдают unbounded-констрейнты, а также изучить как работать с виджетами которые помогают работать с unbounded констрейнтами
FittedBox
FittedBox — виджет, который позволяет «вписать» и расположить дочерний виджет в текущих границах.
FittedBox часто используется с «негибкими» виджетами (например картинки или подобные виджеты), размер которых неизвестен заранее и не зависит от текущих констрейнтов, и мы хотим встроить их с учетом текущих границ.
FittedBox стоит использовать, когда дочерний виджет больше или меньше границ в которых мы хотим его расположить. После стадии лейаута FittedBox производит трансформацию чтобы вписать дочерний виджет особым образом.
Мы можем определить каким образом вписать дочерний виджет с помощью трех параметров alignment (AlignmentGeometry, Alignment или AlignmentDirectional), clipBehavior (Clip) и fit (BoxFit).
BoxFit — может принимать одно из следующих значений (наглядные примеры можно увидеть в документации):
BoxFit.fill — дочерний виджет полностью заполнит текущие границы, при этом пропорции при необходимости будут изменены;
BoxFit.contain (дефолтное значение) — дочерний виджет полностью впишется в текущие границы, примет максимально возможный размер и при этом пропорции не будут изменены, по краям будет пустота если пропорции отличаются и передан соответствующий clipBehavior;
BoxFit.cover — дочерний виджет полностью заполнит текущие границы, примет минимально возможный размер и при этом пропорции не будут изменены, дочерний виджет будет “обрезан” по краям если пропорции отличаются и передан соответствующий clipBehavior;
BoxFit.fitWidth — дочерний виджет полностью заполнит текущие границы по ширине, при этом пропорции не будут изменены, дочерний виджет будет “обрезан” по краям если пропорции отличаются и передан соответствующий clipBehavior;
BoxFit.fitHeight — дочерний виджет полностью заполнит текущие границы по высоте, при этом пропорции не будут изменены, дочерний виджет будет “обрезан” по краям если пропорции отличаются и передан соответствующий clipBehavior;
BoxFit.none — не трансформирует размер дочернего виджета, при этом виджет может быть обрезан «по краям», если не умещается в текущих границах и передан соответствующий clipBehavior;
BoxFit.scaleDown — работает по сути так же, как и BoxFit.contain, но допускает только уменьшение дочернего виджета.
Например, вместо использования OverflowBox, чтобы избежать ошибки и полностью отобразить контент, мы можем воспользоваться виджетом FittedBox.
home: FittedBox(
child: UnconstrainedBox(
child: Container(
color: Colors.red,
width: 1000.0,
height: 1000.0,
),
),
),
Как мы видим, контейнер полностью был вписан в текущие границы, никаких ошибок нет и его пропорции сохранены.
Flex, Column и Row
Flex, Column и Row — виджеты, которые принимают список дочерних виджетов и размещают их в ряд один за другим в определённом направлении. Flex — это базовый виджет, который может работать и как Column, и как Row. Column и Row — это на самом деле обёртки над Flex.
Давайте рассмотрим работу с Flex-виджетами на примере работы с Row.
Row отдаёт дочерним виджетам констрейнты, которые по высоте равны полученным от родителя, а по ширине unbounded.
Пример использования Row:
home: Material(
color: Colors.white,
child: Center(
child: Row(
children: [
Container(
color: Colors.red,
child: const Text(
'Hello',
style: TextStyle(fontSize: 56),
),
),
Container(
color: Colors.blue,
child: const Text(
'Flutter',
style: TextStyle(fontSize: 56),
),
),
],
),
),
),
В примере выше нет никаких проблем, давайте попробуем увеличить количество текста:
home: Material(
color: Colors.white,
child: Center(
child: Row(
children: [
Container(
color: Colors.red,
child: const Text(
'Hello',
style: TextStyle(fontSize: 56),
),
),
Container(
color: Colors.blue,
child: const Text(
'Lorem ipsum is placeholder text commonly used in the graphic',
style: TextStyle(fontSize: 56),
),
),
],
),
),
),
Как мы видим, текст не уместился, и мы получили ошибку A RenderFlex overflowed by 3352 pixels on the right...
Дело в том, что Row — это особый виджет с особой логикой размещения виджетов и разработчиками фреймворка Flutter было принято решение оставить ответственность за констрейнты и размеры (Size) на разработчике.
Такое решение было принято потому, что фреймворк не может знать как именно вы хотите расположить виджеты и кому из них сколько выделить места. Например, если первому виджету передать всю доступную ширину, то он, возможно, займёт её целиком, и для остальных уже не останется места.
Таким образом все виджеты получают unbounded-констрейнты по ширине. Ответственность за то, что все виджеты уместятся — лежит на разработчике.
Чтобы разделить доступную ширину среди детей, есть три виджета — Flexible, Expanded и Spacer.
const Flexible({
super.key,
this.flex = 1,
this.fit = FlexFit.loose,
required super.child,
});
flexопределяет вес среди всех детейfitопределяет констрейнты (loose или tight).
const Expanded({
super.key,
super.flex,
required super.child,
}) : super(fit: FlexFit.tight);
Expanded наследуется от Flexible и всегда имеет FlexFit.tight
const Spacer({super.key, this.flex = 1})
: assert(flex != null),
assert(flex > 0);
Spacer это Expanded у которого нет child, позволяет заполнить пустотой оставшееся место
Чтобы исправить ошибку в нашем последнем примере, мы можем обернуть не уместившийся виджет в Expanded, тогда первый виджет займёт место, равное своему размеру, а второй — всё оставшееся место.
Пример использования Row c Expanded:
home: Material(
color: Colors.white,
child: Center(
child: Row(
children: [
Container(
color: Colors.red,
child: const Text(
'Hello',
style: TextStyle(fontSize: 56),
),
),
Expanded(
child: Container(
color: Colors.blue,
child: const Text(
'Lorem ipsum is placeholder text commonly used in the graphic',
style: TextStyle(fontSize: 56),
),
),
),
],
),
),
),
Первый виджет Text получил unbounded-констрейнты и занял столько места сколько ему нужно, а второй виджет Text получил bounded-констрейнты равные оставшемуся свободному месту и занял его, при этом текст переносится на новую строку..
Если мы обернём оба виджета в Expanded, то они оба получат bounded-констрейнты равные половине доступного места. Если мы хотим распределить место в других пропорциях, стоит воспользоваться параметром flex, так если первому виджету передать значение flex 1, а второму 3 - то первый займет 25% места, а второй 75% (т.е. свободное место будет определяться как доля flex текущего виджета от суммы всех flex).
IntrinsicWidth и IntrinsicHeight
IntrinsicWidth и IntrinsicHeight — это специальные виджеты которые могут быть использованы в unbounded- и loose-констрейнтах, чтобы предотвратить «растягивание» виджета и определить максимальную ширину/высоту в зависимости от содержания виджетов.
Данные виджеты часто используются в Column и Row чтобы задать ширину/высоту для виджета равную максимальной из детей.
Пример использования Column без IntrinsicWidth:
Material(
color: Colors.white,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
color: Colors.red,
child: const Text(
'Hello',
style: TextStyle(fontSize: 56),
),
),
Container(
color: Colors.blue,
child: const Text(
'Flutter',
style: TextStyle(fontSize: 56),
),
),
Container(
color: Colors.green,
child: const Text(
'Handbook',
style: TextStyle(fontSize: 56),
),
),
],
),
),
),
В данном примере мы видим, что каждый Container принимает ширину текста
Если нам необходимо выровнять всех детей Column по самому широкому элементу, мы можем воспользоваться виджетом IntrinsicWidth. Давайте обернём Column в IntrinsicWidth и добавим crossAxisAlignment: CrossAxisAlignment.stretch.
CrossAxisAlignment.stretch заставит всех детей принять ширину самого Column, а IntrinsicWidth предотвратит растягивание Column на всю ширину экрана и заставит его принять ширину по максимальной ширине контента.
Пример использования Column c IntrinsicWidth:
home: Material(
color: Colors.white,
child: Center(
child: IntrinsicWidth(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
color: Colors.red,
child: const Text(
'Hello',
style: TextStyle(fontSize: 56),
),
),
Container(
color: Colors.blue,
child: const Text(
'Flutter',
style: TextStyle(fontSize: 56),
),
),
Container(
color: Colors.green,
child: const Text(
'Handbook',
style: TextStyle(fontSize: 56),
),
),
],
),
),
),
),
Важное замечание! Не стоит использовать intrinsic-виджеты если можно обойтись без них. Данный виджет добавляет спекулятивную фазу расчета лейаута перед финальной, что делает расчет лейаута дороже (в худшем случае сложность может быть O(N²) от размера пересчитываемого поддерева)
Виджеты со скроллом и списки
К виджетам со скроллом и спискам относятся SingleChildScrollView, ListView и многие другие (более подробно работа со списками будет рассмотрена в следующих параграфах).
У этих виджетов особым образом определяется их размер и констрейнты для дочерних виджетов:
- они растягиваются по ширине и высоте на всё доступное место, поэтому их нельзя размещать в unbounded-констрейнтах;
- по направлению скрола такие виджеты отдают unbounded-констрейнты;
- ортогонально направлению скрола предоставляют tight-констрейнты.
Пример использования SingleChildScrollView:
home: Material(
color: Colors.white,
child: SingleChildScrollView(
child: Column(
children: Colors.primaries
.map(
(color) => Container(
height: 200.0,
color: color,
),
)
.toList(),
),
),
),
Как мы видим SingleChildScrollView занял весь экран, список из Container скроллится и несмотря на то, что мы указали только height, в Container по ширине виджеты растянулись сами.
Давайте запустим LayoutExplorer выберем Column и посмотрим какие в данном случае будут констрейнты.
Column — получил от SingleChildScrollView tight-констрейнты по ширине (w = 390.0) и unbounded по высоте.
Container — получил от Column loose-констрейнты по ширине (0.0 <= w <= 390.0) и unbounded по высоте.
По высоте виджет Container определил свой размер согласно переданному значению height, а по ширине растянулся на все доступное место - это стандартное поведение виджета Container у которого нет дочернего виджета, в bounded-констрейнтах он занимает все свободное место, а в unbounded-констрейнтах становится минимально возможного размера.
- под констрейнтом понимается констрейнт по конкретной оси, по ширине или высоте;
- ширина или высота — это, соответсвенно, значение
widthиheightпереданное вContainer.
Пример использования SingleChildScrollView в Column, в unbounded-констрейнтах
home: Material(
color: Colors.white,
child: Column(
children: [
SingleChildScrollView(
child: Column(
children: Colors.primaries
.map(
(color) => Container(
height: 200.0,
color: color,
),
)
.toList(),
),
),
Container(
height: 100.0,
color: Colors.grey,
),
],
),
),
В данном примере мы получили ошибку A RenderFlex overflowed by 2856 pixels on the bottom.... Это происходит потому, что SingleChildScrollView пытается занять всё свободное место, в то время когда мы его помещаем в unbounded-констрейнты — эту ошибку можно исправить если обернуть SingleChildScrollView в Expanded, в таком случае мы получим следующий результат:
LimitedBox
LimitedBox — виджет, который позволяет ограничить размер дочернего виджета в случае, если текущие констрейнты — unbounded.
Это может быть полезным, когда мы хотим сделать адаптивный виджет, который может быть размещен и в bounded- и в unbounded-констрейнтах.
Например, мы могли воспользоваться LimitedBox вместо Expanded чтобы исправить ошибку и определить максимальный размер для SingleChildScrollView если он расположен в unbounded-констрейнтах
home: Material(
color: Colors.white,
child: Column(
children: [
LimitedBox(
maxHeight: 500.0,
child: SingleChildScrollView(
child: Column(
children: Colors.primaries
.map(
(color) => Container(
height: 200.0,
color: color,
),
)
.toList(),
),
),
),
Container(
height: 200.0,
color: Colors.grey,
),
],
),
),
Stack
Stack — виджет, который размещает дочерние виджеты относительно своих границ, то есть позволяет располагать виджеты один поверх другого. Stack аналогично Flex-виджетам обладает особой логикой размещения и констрейнты в Stack работают по-разному для спозиционированных и неспоциционированных виджетов.
Чтобы спозиционировать виджет внутри Stack используется виджет Positioned (данный виджет обязательно должен использоваться внутри Stack).
const Positioned({
super.key,
this.left,
this.top,
this.right,
this.bottom,
this.width,
this.height,
required super.child,
})
Positioned — это виджет который управляет, где относительно самого Stack будет спозиционирован child.
left, top, right, bottom — отступы от краёв Stack
width — ширина child (одновременно могут быть заданы не более 2 значений из left, right, width)
height — высота child (одновременно могут быть заданы не более 2 значений из top, bottom, height)
Параметр с помощью которого управляются констрейнты называется fit (StackFit)
StackFit.loose — всем виджетам передаются loose констрейнты с максимальной шириной и выстой равными ширине и высоте самого Stack
StackFit.expand — неспозиционнированные виджеты получают tight-констрейнты равные максимально возможным, спозиционнированые получают unbounded- loose-констрейнты
StackFit.passthrough - неспозиционнированные дети получают констрейнты которые Stack получил от родителя, спозиционнированые получают loose констрейнты
StackFit.passthrough часто используется, когда Stack находится в Row/Column - например, если Stack находится в Row и обернут в Expanded, он будет иметь tight-констрейнты по горизонтали и loose-констрейнты по вертикали.
Пример использования Stack с StackFit.loose
home: Material(
color: Colors.white,
child: Center(
child: SizedBox(
width: 350.0,
height: 350.0,
child: Container(
color: Colors.black12,
child: Stack(
alignment: Alignment.center,
fit: StackFit.loose,
children: [
Container(
color: Colors.red,
height: 100.0,
width: 100.0,
),
Container(
color: Colors.blue,
height: 50.0,
width: 50.0,
),
Positioned(
bottom: 25.0,
child: Container(
color: Colors.green,
height: 100.0,
width: 100.0,
),
),
Positioned(
bottom: 50.0,
child: Container(
color: Colors.yellow,
height: 50.0,
width: 50.0,
),
),
],
),
),
),
),
),
Пример использования Stack с StackFit.expand
Заключение
Итак, в этом параграфе мы ознакомились с основными принципами лейаута во Flutter и рассмотрели базовые layout-виджеты.
Конечно, это далеко не все виджеты, которые нам предоставляет фреймворк, но разобравшись с основными принципами и базовыми виджетами будет довольно просто разобраться с остальными.
Каждый раз, когда сталкиваетесь с новым виджетом, рекомендуем начинать с документации — команда Flutter проводит отличную работу по документированию, а также снимает короткие видеоролики в которых наглядно демонстрируется поведение и примеры использования различных компонентов Flutter.