flutter UI: реализация адаптивного интерфейса

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

Рассмотрим часто используемые способы реализации адаптивного интерфейса, но начнем с главного:

— определим размеры экранов (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 - размер конкретного виджета. Это отличие позволяет выстраивать разные виджеты/контент-блоки под разные размеры и типы устройств, что существенно улучшит пользовательский опыт при работе с приложением.

Автор:

Юрий А.

UI специалист

Технологии: