Разные размеры экранов на Flutter Размеры экранов современных | Mobile Pet

Разные размеры экранов на Flutter

Размеры экранов современных гаджетов начинаются от 4″ и заканчиваются в районе 13″ (хотя бывает и больше). Если писать один и тот же код декларативного интерфейса под все модели, то вы неизбежно столкнетесь с проблемами верстки, вытекающими в плохой UX. Сегодня рассмотрим возможные решения этих проблем и узнаем, как адаптировать наш интерфейс на Flutter под разные устройства.

Смотреть на ширину экрана. Расположение и размеры UI-элементов можно завязать на ширину экрана и в зависимости её значения верстать разные варианты. Flutter легко позволяет узнать размеры экрана из текущего context через MediaQuery. В коде это выглядит вот так:

static bool isMobile(BuildContext context) => MediaQuery.of(context).size.width < 600;

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

Смотреть на ориентацию. По аналогии с шириной добавляем еще один параметр для адаптивного UI – ориентацию устройства. Flutter позволяет обработать её динамически с помощью OrientationBuilder. Напомню, что можно использовать только стандартную книжную ориентацию, если не хотите тратить на это время.

Смотреть на размеры родителя. Flutter-виджеты вкладываются друг в друга, образуя дерево. Мы также можем установить правила для отображения посмотрев на родительский виджет в дереве и на его размеры. Делается это с помощью LayoutBuilder.

Отключить планшеты. Решение довольно радикальное, но в случае нехватки времени на проработку макетов и написание кода для планшетов лучше не использовать их вовсе или отложить до более поздней версии. Так вы избавите планшетную аудиторию от плохого опыта, а продукт – от негативных отзывов.

Перечисленные правила также актуальны для поддержки браузеров через Flutter Web. Так что если решите писать один код для всего UI на свете, Flutter отлично поможет вам в этом.
#development