Hola, Amigos! Меня зовут Ярослав Цемко, я Flutter-разработчик в компании заказной разработки Amiga. Сейчас я расскажу об очень крутом плагине, который помог нам решить проблемы, связанные с адаптацией контента под разные дисплеи в одном из наших проектов.
Изначально задача состояла в том, чтобы в приложении на разных девайсах (веб, мобильный телефон и специальный планшет с разрешением 1920 × 1080 c низкой плотностью пикселей) был удобный в пользовании интерфейс и красивая картинка.
У нас было несколько путей реализации, и у каждого из них свои сложности и ограничения.
Встроенные средства
Expanded, Flexible и др., которые позволяют сделать хорошую адаптивность вёрстки. В данном случае они не подходят, так как необходимо соблюсти масштаб всех элементов. Нужно избежать ситуации: когда на экране с низким разрешением, кнопки и поля ввода большие, а на телефоне — нужного размера. К сожалению, данный подход не помог нам достичь нужного результата.
LayoutBuilder
Тоже очень классный инструмент, который:
- Позволяет получить размер дисплея в любом месте по дереву виджетов.
- Сделать разную верстку для разных дисплеев.
- Задавать для разных дисплеев размеры элемента и масштабировать их.
Однако код превращается в ад из кучи условий на каждую группу элементов и подстройку размера шрифтов, да и времени на реализацию много тратится, так что этот вариант тоже не подходит.
responsive_sizer
Отличный плагин для работы с масштабированием элементов. Позволяет производить масштаб элементов в процентном соотношении.
Пример: ширина кнопки должна составлять 20% от ширины экрана. Для этого можно написать в параметре width 20.w, и мы получим нужный размер на разных экранах. Также это можно делать для высоты элементов с помощью параметра 20.h, что будет значить 20% от высоты экрана. Шрифты тоже можно масштабировать, но уже с помощью другого модификатора — sp, что означает плотность пикселей.
Например, если мы хотим чтобы у нас 14ый шрифт масштабировался в зависимости от дисплея, мы пишем в fontSize 14.sp, и шрифт на разных дисплеях будет выглядеть красиво. Это очень похоже на CSS. Однако на этапе требований к задаче заказчик попросил, чтобы в реализации были брейкпоинты, то есть заранее заданные диапазоны экранов, от которых дальше будет производится подстройка размера элементов. Заказчик посчитал этот вариант удобным поскольку ему в дальнейшем будет проще дорабатывать приложение с таким подходом.
Из всех вариантов больше всего понравился responsive_framework, поскольку он отвечает всем требованиям по задаче. После небольшого освоения становится очень удобным инструментом для решения проблем. Почему?
Для нас, разработчиков это хорошо потому что:
Брейкпоинты, то есть диапазоны ширины экрана встроены по умолчанию, что позволяет не городить собственный огород, тратя время. Причём эти самые брейкпоинты удобно располагаются в дереве виджетов.
Если мы делаем масштабирование элементов, то больше не будет нужды прописывать масштабирование шрифтов для каждого элемента, так как можно обернуть нужный экран в виджет, и все масштабирование будет производится автоматически. Это касается и масштаба элементов.
Позволяет удобно задавать размеры для портретной и ландшафтной ориентации.
Для бизнеса:
- Быстрая скорость разработки.
- Качественный результат.
- Легко развивать приложение и не переживать об адаптации для разных устройств.
Исходя из вышеперечисленного мы можем довольно быстро получить нужный нам результат.
В нашем проекте на адаптацию одной страницы с LayoutBuilder было потрачено 12 часов, а с responsive_framework всего 4 часа.
Теперь рассмотрим основные компоненты, которые нам помогут с адаптацией приложения под разные дисплеи.
Breakpoint
Позволяет задать диапазон ширины экрана и назначить ему имя или идентификатор, который можно будет использовать далее вниз по дереву в условных выражениях. Чтобы на основании брейкпоинтов выставлять параметры, либо переделывать вёрстку.
В качестве имени брейкпоинтам есть константные значения DESKTOP, MOBILE, PHONE и TABLET. Но можно в том числе задать строкой собственное имя.
Breakpoint
ResponsiveBreakpoint(
breakpoints: const [
Breakpoint(start: 0, end: 400, name: MOBILE),
Breakpoint (start: 401, end: 1400, name: PHONE),
],
child: child!,
),
Расскажите о вашем проекте
компании напрямую?
