Адаптивный макет

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

Примечание:
Просим ознакомиться с примерами в порядке их представления, поскольку они используют один и тот же пример. Переход в разделы может вызвать путаницу.

Глобальные свойства

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

Сначала создайте новый проект. На домашней странице, внутри родительского виджета столбца (Column), добавьте два виджета Text. Обозначьте один как "Ширина экрана", а другой как "Высота экрана".

Затем мы отобразим изменяющиеся значения рядом с этими названиями. Для каждого виджета Text установите его значение в переменную. Выберите Объединить текст из доступных опций. Первое значение для Text должно быть "Ширина экрана: " или "Высота экрана: ".

Затем добавьте еще одно значение Text, которое покажет соответствующее значение. Это второе значение Text также устанавливается из переменной. Выберите 'Глобальные свойства', а затем выберите либо 'Ширина экрана', либо 'Высота экрана' из списка. Эти параметры содержат текущие значения ширины/высоты экрана. Повторите этот процесс для обоих виджетов Text.

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

Расширение и гибкость

Давайте рассмотрим основной метод сделать строки и колонки адаптивными под различные размеры экранов. При проектировании строки (Row) или столбца (Column) важно избегать присваивания фиксированных размеров дочерним элементам, если это не требуется специально по дизайну.

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

Для создания такой же панели навигации создайте следующую иерархию виджетов:

- Container (назван как webHeader)
       - Row
             - Row
             - TextField (назван как searchBar)
             - IconButton

Вторая строка дополнительно разбивается следующим образом:

- Row 2
    - Text (назван как pageName)
    - Row 3 (назван как navIcons)
        - IconButton
        - IconButton
        - IconButton

Как видно, поисковая строка в данный момент занимает максимальное доступное пространство. Однако мы хотим, чтобы и Row 2, и searchBar делили это пространство поровну. Чтобы добиться этого, просто отрегулируйте свойства виджетов.

Для Row 2 установите его свойство Expansion в Гибкий (средняя иконка) и присвойте значение Flex равное 1. Повторите те же шаги для searchBar. Эти изменения гарантируют, что им будет выделено место в соотношении 1:1, исходя из доступного пространства. После такой регулировки вы заметите, что оставшееся пространство, идущее после размещения search IconButton справа, будет равномерно разделено между Row 2 и searchBar.

Приглашаем вас опробовать различные варианты размеров веб-экрана, чтобы увидеть, насколько хорошо это адаптируется.

В зависимости от ваших дизайнерских потребностей существуют различные подходы к управлению пространством. Рассмотрим другой сценарий: что если мы хотим, чтобы searchBar всегда занимала 40% ширины экрана, а Row 2 занимала оставшееся пространство после размещения searchBar и search IconButton?

Для этого сначала установите ширину searchBar в 40% и его расширение в По умолчанию (первая иконка).

Затем отрегулируйте свойство Expansion виджета Row 2 на Расширение (третья иконка). С этими настройками Row 2 будет теперь занимать все свободное место после выделения 40% searchBar и размещения search IconButton.

Примечание: Мы добавили немного отступов и улучшили интерфейс searchBar, чтобы улучшить его внешний вид.

Можно также улучшить расстояние между pageName и navIcons, отрегулировав выравнивание MainAxisAlignment на В промежутках (последняя иконка).

Не стесняйтесь опробовать это с различными размерами экрана, чтобы увидеть, насколько эффективно это адаптируется к доступному пространству.

Метод Wrap

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

Рассмотрим сценарий с рядом категориальных карточек.

Вы можете заметить, что при изменении размера экрана, чтобы имитировать мобильные размеры, карточки начинают обрезаться по краям.

Для решения этой проблемы просто замените родительский виджет Row на виджет Wrap.

Убедитесь, что в настройках Wrap установлено направление Wrap на 'Горизонтальный'. После этого вы увидите, как ранее выходившие за границы карточки аккуратно перемещаются на следующую строку, как показано в примере.

Адаптивные точки остановки

Переходим к более сложным сценариям макета, где интерфейс значительно отличается между мобильными и веб-платформами. Важно понимать точки остановки (breakpoints) в адаптивном дизайне.

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

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

Настройка адаптивных точек остановок

Перейдите в Настройки темы > Система дизайна и найдите раздел Точки остановок с уже установленными значениями по умолчанию. При необходимости вы можете настроить их.

Следующие разделы также будут сильно зависеть от Адаптивной видимости, поэтому давайте продолжим.

Видимость Навигационной панели и Панели приложения

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

Просто перейдите в Настройки приложения, выберите Навигационную панель и Панель приложения, и включите опцию 'Показать навигационную панель'. После включения вы увидите дополнительные настройки. Иконки для мобильных, планшетных устройств, планшетных устройств (горизонтальная ориентация) и настольных компьютеров позволяют выбрать, где должна появляться Навигационная панель.

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

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

Отзывчивая видимость

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

Чтобы решить это, мы можем использовать функцию Отзывчивая видимость FlutterFlow для реализации отдельных дизайнов панели приложения и поисковой строки для мобильных устройств, сохраняя при этом текущий дизайн для веб-версии.

Представим, что мы создали новый виджет, mobileAppBar, и добавили его в наш макет. Этот виджет умно разделяет заголовок категорий и поисковую строку вертикально и включает кнопку навигации "назад". Цель состоит в том, чтобы активировать этот мобильно-ориентированный макет для мобильных и планшетных экранов, сохраняя 'webHeader' для планшетных (горизонтальная ориентация) и настольных вариантов.

Для внедрения этого подхода мы можем перейти к свойствам его виджета и переключить иконки устройств, как показано в следующем демо.

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

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