При создании мобильных приложений разработчики часто используют фразу «адаптивная верстка». Сегодня поговорим о том, что же это такое и как реализовать.
Адаптивная верстка — это верстка, которая автоматически подстраивается под разные размеры и типы экранов.
При создании мобильного приложения разработчику всегда стоит держать в голове мысль о том, что устройства пользователей могут быть абсолютно разными. Кто-то пользуется смартфоном со стандартным экраном, а кто-то предпочитает огромные планшеты или даже нестандарные складные устройства, по типу Samsung Fold. При всем этом разнообразии верстка никогда не должна ломаться и тем более падать в ошибку, так как это всегда вызывает много негатива со стороны юзеров.
Для поддержания адаптивности верстки могу порекомендовать 5 самых полезных и универсальных виджетов.
1. MediaQuery
Довольно распространенный виджет для получения данных об устройстве — размерах и ориентации экрана, соотношении сторон, плотности пикселей и многом другом. С его помощью вы можете определять и даже рассчитывать размеры других виджетов на странице.
final screenWidth = MediaQuery.sizeOf(context).width;
final aspectRatio = MediaQuery.sizeOf(context).aspectRatio;
final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
2. OrientationBuilder
Этот виджет позволяет отслеживать ориентацию вашего экрана и ее изменения. В случае, если пользователь перевернет устройство, виджеты, вложенные в OrientationBuilder будут перестроены. Например, это может быть полезно, когда в вертикальной ориентации на экран нужно вывести карточки в одну колонку, а на горизонтальной — в две.
OrientationBuilder(
builder: (context, orientation) {
return orientation == Orientation.portrait
? OneColumnView()
: TwoColumnsView();
},
)
3. LayoutBuilder
Этот виджет отслеживает изменения размеров родительского виджета (или экрана, если родительский виджет не будет иметь ограничений). Так же, как и OrientationBuilder, при изменении отслеживаемых параметров он будет перестраивать вложенные виджеты.
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth > 400) {
return WideLayout();
} else {
return NarrowLayout();
}
},
)
4. AspectRatio
Позволяет задавать дочернему виджету соотношение сторон. Например, у вас стоит задача добавить на экран рекламный баннер, в который будут приходить изображения с сервера. В таком случае, если зафиксировать, допустим, высоту, а ширину оставить по размеру экрана, то картинка будет обрезаться. Здесь оптимальным решением будет добавить AspectRatio с соотношением сторон, совпадающим с соотношением изображения баннера.
AspectRatio(
aspectRatio: 16 / 9,
child: Image.network(src),
)
5. ConstrainedBox
Довольно часто при адаптации верстки под планшеты требуется ограничивать ширину содержимого страницы так, чтобы она не была шире определенного значения. При этом на меньших устройствах содержимое должно быть по ширине экрана. Именно здесь на помощь придет ConstrainedBox. Он позволяет задать минимальные и максимальные размеры дочерних виджетов.
ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 400,
),
child: const Card(child: Text('Hello World!')),
)
P.S. и конечно же не забываем про базовые flex-виджеты — Flexible и Expanded.
Делитесь своими советами по адаптивной верстке в комментариях💬