Перейти к основному содержимому

Адаптивный и отзывчивый интерфейс

Отзывчивость — это когда вёрстка перестраивается вслед за размером окна. Адаптивность — когда приложение ведёт себя так, будто оно родное для платформы, на которой запущено. Это разные задачи, и как только приложение выходит за пределы телефонов, нужны обе.

Почему это важно. Обещание Flutter — одна кодовая база везде, и ломается это обещание телефонной вёрсткой, растянутой на окно десктопа: колонка кнопок шириной в две тысячи пикселей, bottom sheet на мониторе, правый клик, который ничего не делает.

Что нужно понимать​

  • Что здесь ограничение: размер окна, способ ввода или соглашения платформы
  • Какие макеты действительно разные, а какие — один и тот же, просто перестроенный
  • Чего пользователь ждёт на этой платформе, — а ждёт он не того же, что на другой
  • Где решается размер: в окне или в том пространстве, которое досталось этому widget
  • Что меняется, если размер окна меняют прямо во время работы приложения

Основные темы​

Отзывчивость​

  • Breakpoints и их выбор по содержимому, а не по названиям устройств
  • LayoutBuilder вместо MediaQuery, когда важно пространство, выделенное родителем
  • Схемы перестроения: список → master-detail, стопка → две колонки рядом
  • Максимальная ширина: текст во всю ширину десктопа нечитаем
  • Ориентация, складные экраны и разделённый экран

Адаптивность​

  • Навигация: bottom bar, rail, drawer — и когда уместно каждое
  • Соглашения платформы для диалогов, меню, полос прокрутки и выделения
  • Ввод: наведение мыши, правый клик, сочетания клавиш, порядок обхода фокуса
  • Выделение и копирование текста на десктопе и в вебе
  • Плотность интерфейса и зоны нажатия, которые под мышью уменьшаются

Структура​

  • Общая логика и подмена только вёрстки
  • Где живёт ветвление, чтобы фичи не были нашпигованы проверками размера
  • Проверка нескольких размеров без четырёх скриншотов на удачу

Особенности веба​

  • URL, deep links и перезагрузка страницы
  • Размер первой загрузки и то, на что пользователь всё это время смотрит
  • Кнопки браузера «назад» и «вперёд» как полноценная навигация

Уровни​

УровеньКак это выглядит
JuniorИзбегает overflow на телефонах разного размера и обрабатывает смену ориентации.
MiddleДелает настоящие макеты под разные breakpoints, адаптирует навигацию, обрабатывает ввод с мыши и с клавиатуры.
SeniorПроектирует одну структуру, которая обслуживает любой форм-фактор: соглашения платформ соблюдены, ветвление собрано в одном месте.

Практика​

Для начала​

  • Тяните окно, пока не сломается Запустите приложение на десктопе и растяните окно от узкого до широкого. Почините всё уродливое.

  • Ограничьте ширину Задайте экрану с большим количеством текста максимальную ширину содержимого и выберите её по читаемости.

  • Поддержите наведение Добавьте hover-состояния чему-нибудь интерактивному и проверьте, что курсор правильный.

Глубже​

  • Master–detail Сделайте связку «список — детали», которая на телефоне разворачивается в два экрана, а на планшете в один, из одного и того же кода.

  • Адаптируйте навигацию Переключайтесь по ширине с bottom bar на rail и дальше на drawer, сохраняя состояние при переключении.

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

Проверьте себя​

  • Как ваше приложение выглядит в окне шириной 400 пикселей и шириной 2000?
  • Где вы ветвитесь по размеру — в одном месте или понемногу везде?
  • Что происходит по правому клику в вашем приложении?
  • Пройдёт ли человек основной сценарий одной только клавиатурой?
  • Какие из ваших диалогов оказались бы неуместны на десктопе?
  • Что ломается, если менять размер окна при открытом экране?

Ресурсы​

  • Adaptive and responsive design — официальное руководство, на удивление хорошее: оно аккуратно разводит два понятия и говорит не только о вёрстке, но и о вводе.
  • Material 3: Layout — классы размеров окна и канонические макеты, с breakpoints от человека, который изучал задачу, а не слухи о новых устройствах.
  • Building adaptive apps — рекомендации для больших экранов, включая схемы навигации и различия во вводе.
  • Material 3: Adaptive design — разница между реакцией на размер и адаптацией к платформе, обоснованная исследованиями, а не вкусом.
  • Flutter on the web — что действительно отличается, включая работу с URL и характер загрузки.