Для того, чтобы добиться отзывчивости, нужно придерживаться двух основных правил:
Первое – использование гибких (flexible) виджетов, т. е. виджетов, которые занимают все предоставленное пространство.
Второе – если нам необходимо занимать не все пространство, а только некоторую его часть, мы должны отталкиваться от размеров экрана – использовать MediaQuery данные.
Если отзывчивый подход решает часть проблем, почему бы не использовать только его? Во-первых, создание гибкого UI – процесс достаточно трудоемкий, и иногда просто выгоднее использовать подходы проще. Во-вторых, работа с flexible виджетами не всегда предсказуема. Это касается как их непосредственного отображения, так и взаимодействия с другими элементами экрана. Для примера представим реализацию скролла. Так или иначе, необходимо обозначить область, в которой он будет располагаться, а также определиться с тем, как будут выглядеть его элементы. Однако если подразумевается использование flexible виджетов, мы получаем следующую картину: скролл сам по себе – неограниченное рабочее пространство, и туда помещаются объекты неограниченных размеров.
Также нужно понимать, что подобное определение размеров виджетов – очень приблизительно. Бывают случаи, когда оптимальнее использовать конкретные значения, а не вычислять их, используя сложные выражения.
Плюс ко всему, использование гибкого UI нагружает приложение, и если перестараться, это может привести к проблемам с производительностью.
На что стоит обратить внимание, когда речь идет об адаптивной верстке?
Конечно, самая очевидная проблема - понимание того, как должны виджеты реагировать на изменение размеров экрана. Есть вероятность, что брейкпоинтов, определенных разработчиком, может не хватить. То есть для каких-то экранов приложение работать будет корректно, но оно также может быть запущено на неучтенных устройствах, для которых подобная реализация не подходит.
Вероятнее всего, часть таких проблем можно решить использованием отзывчивого подхода, который помимо мультиплатформенности поддерживает еще и гибкость в рамках одного типа устройств.
Далее приведен список виджетов, которые могут хорошо помочь вам при адаптивной и отзывчивой верстке:
- AspectRatio
- CustomSingleChildLayout
- CustomMultiChildLayout
- FittedBox
- FractionallySizedBox
- LayoutBuilder
- OrientationBuilder
- MediaQuery
- MediaQueryData
- Expanded
- Flexible
- Spacer
Рассмотрим использование некоторых из представленных виджетов на основе PortraitWidget, который был упомянут выше: