В ходе разработки приложений почти всегда стоит задача внедрения адаптивного дизайна в интерфейс. Так, например, приложение необходимо адаптировать под разрешения планшетов, а в отдельных случаях, под экраны небольших ноутбуков и стационарных мониторов.
Рассмотрим часто используемые способы реализации адаптивного интерфейса, но начнем с главного:
— определим размеры экранов (Breakpoints), при достижении которых будем скрывать и/или менять отображение виджетов в приложении, и вынесем эти параметры в отдельный .dart файл, в виде нового абстрактного класса:
abstract class Breakpoints {
static const breakpointsSm = 576.0;
static const breakpointsMd = 768.0;
static const breakpointsLg = 1023.0;
static const breakpointsXl = 1440.0;
}
В качестве примера, скроем виджет AppBar в случае, когда размер пользовательского экрана достигнет параметра 768px. Для этого необходимо:
- получить размер устройства пользователя:
final screenSize = MediaQuery.of(context).size.width
- скрыть AppBar, ссылаясь на ранее созданный Breakpoints
appBar: screenSize >= Breakpoints.breakpointsMd ? AppBar(
title: Text('Назад'),
) : null,
Готово. Теперь, при достижении разрешения экрана в 768px виджет AppBar будет скрыт.
Также мы можем реализовать логику показа определенных наборов виджетов, в зависимости от разрешения экрана.
Для этого будем использовать конструктор LayoutBuilder.
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth < Breakpoints.breakpointsSm) {
return _mobileContent();
} else if (constraints.maxWidth < Breakpoints.breakpointsLg) {
return _tabletContent();
} else {
return _desktopContent();
}
},
),
Обратите внимание и учитывайте, что Media Query - использует полный размер экрана устройства, а LayoutBuilder - размер конкретного виджета. Это отличие позволяет выстраивать разные виджеты/контент-блоки под разные размеры и типы устройств, что существенно улучшит пользовательский опыт при работе с приложением.