Адаптивная вёрстка во Flutter
Вопрос
Как вы делаете интерфейс, который одинаково хорошо работает на телефоне, планшете и в вебе?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Точки перелома по ширине: `MediaQuery.sizeOf` для экрана, `LayoutBuilder` для компонента
Разные раскладки: нижняя навигация на телефоне, `NavigationRail` или боковая панель на широком экране
Гибкие виджеты (`Expanded`, `Flexible`, `Wrap`) вместо фиксированных размеров
Учёт `SafeArea`, клавиатуры (`viewInsets`), масштаба шрифта
Проверка на разных размерах и ориентации, golden-тесты с разными размерами
Что могут спросить следом
- Как реагировать на увеличенный системный шрифт?
- Чем адаптивность отличается от отзывчивости (adaptive и responsive)?
Разбор
Образцовый ответ: «Я разделяю две задачи. Отзывчивость: интерфейс растягивается под ширину, это гибкие виджеты, Expanded, Wrap, без жёстких размеров. Адаптивность: на разных устройствах разная структура. Завожу точки перелома, например до 600 логических пикселей телефон, дальше планшет. На уровне экрана смотрю MediaQuery.sizeOf, для компонентов LayoutBuilder, потому что карточка может стоять в узкой колонке даже на широком экране. На телефоне нижняя навигация, на планшете NavigationRail, на десктопе список и детали рядом. Обязательно учитываю SafeArea, клавиатуру через viewInsets и увеличенный шрифт: тексты не должны обрезаться при масштабе 1.5. Проверяю на нескольких размерах, в тестах задаю размер поверхности»
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.