Создание отзывчивых приложений на основе холста
Под отзывчивостью понимается способность приложения автоматически согласовываться с различными размерами экрана и форм-факторами, чтобы разумно использовать доступное пространство экрана, обеспечивая отличный пользовательский интерфейс и пользовательский опыт на каждом устройстве, форм-факторе и размере экрана.
Отзывчивость позволяет различным элементам приложения определять, как они:
- Растягиваются или изменяют размеры с изменением размера экрана.
- Сохраняют или изменяют позиции при изменении размера экрана.
Зачем создавать адаптивные приложения
Конечные пользователи могут получить доступ к вашему приложению с разных устройств, таких как телефоны, планшеты, ноутбуки и настольные компьютеры с большими мониторами, экранами разных размеров и с различным количеством пикселей.
Чтобы обеспечить удобство опыта и удобство использования приложения на каждом форм-фактор и устройстве, необходимо разрабатывать приложение с учетом принципов адаптивного дизайна. Даже если приложение предназначено для использования только в веб-браузере или на мобильных телефонах, размеры экрана пользовательского устройства могут быть разными, поэтому разработка приложения с учетом принципов адаптивности — хорошая идея.
Разработка приложения с учетом принципов адаптивности
Прежде чем вы начнете разрабатывать пользовательский интерфейс для своего приложения, вам необходимо рассмотреть следующие аспекты:
- Какие форм-факторы или устройства вы хотите поддерживать?
- Как приложение должно выглядеть в каждом форм-факторе?
- Какие элементы приложения нужно растягивать или изменять размер?
- Скрыты ли элементы в некоторых форм-факторах?
- Приложение работает по-разному в некоторых форм-факторах?
После того, как все эти требования собраны, вы должны начать думать о том, как эти различные макеты пользовательского интерфейса могут быть созданы в одном приложении с помощью адаптивных инструментов, доступных в Power Apps.
Прежде чем вы начнете использовать адаптивные макеты, вам необходимо сделать следующее:
- Перейдите к Power Apps.
- Откройте приложение, в котором вы хотите использовать гибкий макет.
- Перейдите Настройки >Отображение, чтобы отключить Масштабирование по размеру, Сохранить пропорции, Заблокировать ориентацию и выберите Применить.
Гибкие макеты
Следующие адаптивные макеты можно создать, добавив новый экран и выбрав соответствующий параметр на вкладке Макет:
Новые адаптивные макеты доступны для форматов приложений, но новые шаблоны экрана доступны только для формата Планшет.
Разделенный экран
Макет с разделенным экраном состоит из двух разделов, каждый из которых занимает 50% ширины экрана на рабочем столе. На мобильных устройствах разделы располагаются один под другим, каждый занимает всю ширину экрана.
Боковая панель
Макет боковой панели имеет боковую панель фиксированной ширины слева. Основная часть состоит из заголовка фиксированной высоты, а основной раздел занимает остальную часть ширины экрана. По умолчанию шаблон имеет такое же поведение на мобильных устройствах, однако рекомендуется выполнить некоторые настройки на основе шаблона пользовательского интерфейса, необходимого для работы на мобильных устройствах.
Работа с контейнерами
Контейнеры — это строительные блоки всего адаптивного дизайна. Контейнер может быть контейнером с автоматической компоновкой в вертикальном или горизонтальном направлении или контейнер с фиксированным макетом, который в будущем будет поддерживать ограничения.
Ниже приведены несколько советов по созданию пользовательского интерфейса вашего приложения с контейнерами:
- Всегда создавайте элементы пользовательского интерфейса, которые образуют таблицу пользовательского интерфейса внутри контейнера.
- Позволяет контейнеру иметь собственные адаптивные свойства и настройки, чтобы указать, как он располагается или изменяет размер на экранах разных размеров.
- Позволяет вам изменить расположение дочерних компонентов с точки зрения адаптивности.
Выберите один из двух режимов макета для контейнера: макет вручную или автоматический макет (горизонтальный или вертикальный)
Контейнеры с автоматической компоновкой
Два элемента управления, Горизонтальный контейнер и Вертикальный контейнер, могут использоваться для автоматического размещения дочерних компонентов. Эти контейнеры определяют положение дочерних компонентов, поэтому вам никогда не придется устанавливать X, Y для компонента внутри контейнера. Кроме того, он может распределять доступное пространство между дочерними компонентами на основе настроек, а также определяет выравнивание дочерних компонентов как по вертикали, так и по горизонтали.
Когда использовать контейнеры с автоматической компоновкой
Контейнеры с автоматической компоновкой можно использовать в следующих сценариях:
- Пользовательский интерфейс должен реагировать на размер экрана или изменения форм-фактора.
- Существует несколько дочерних компонентов, которые необходимо изменять или перемещать в зависимости от размера экрана или изменений форм-фактора.
- Когда нужно размещать элементы в стопку вертикально или горизонтально (независимо от их размера).
- Когда вам нужно равномерно расположить элементы на экране.
Пример контейнера с автоматической компоновкой
Чтобы создать адаптивный экран:
- Создайте пустое приложение на основе холста с макетом Планшет.
- Выберите Настройки >Отображение и отключите Масштабирование по размеру, Сохранить пропорции, Заблокировать ориентацию и выберите Применить.
- Теперь из области Вставить на левой боковой панели под вкладкой Макет выберите Контейнер с горизонтальной компоновкой.
- X = 0
- Y= 0
- Width = Parent.Width
- Height = Parent. Высота
- Выберите Container2. Вы увидите, что свойство Flexible width включено. Задайте для Fill portions значение 1.
- Выберите Container3. Вы увидите, что свойство Flexible width включено. Задайте для Fill portions значение 3.
Известные проблемы
- Некоторые комбинации свойств контейнера макета несовместимы или могут приводить к нежелательным результатам, например:
- Если свойство Wrap контейнера включено, настройка свойства Align игнорируется в дочерних элементах управления.
- Если свойство Wrap контейнера отключено, а для переполнения первичной оси контейнера установлено значение Прокрутка (горизонтальное переполнение для горизонтальных контейнеров или вертикальное переполнение для вертикальных контейнеров), рекомендуется установить для свойства Justify значение Начало или Пространство между.
- Параметры Центр или Конец могут сделать дочерние элементы управления недоступными, когда контейнер слишком мал для отображения всех элементов управления, даже если свойство Overflow установлено на Прокрутка.
См. также
Каковы ваши предпочтения в отношении языка документации? Пройдите краткий опрос (обратите внимание, что этот опрос представлен на английском языке).
Опрос займет около семи минут. Личные данные не собираются (заявление о конфиденциальности).
Обратная связь
Отправить и просмотреть отзыв по
Как сделать один сайт для всех устройств (Responsive Web Design)
Вчера была опубликована хорошая статья «Веб-дизайн. Каждому устройству свое представление». Несмотря на неплохие размышления, к сожалению, вывод в ней довольно глупый. А именно:
«Нужно определить, какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представление вашего сайта, определить устройство посредством проверки заголовков браузеров, и отправить наиболее подходящее представление.»
Почему это глупо
Во-первых, никто не сможет предугадать, какими устройствами будут пользоваться ваши посетители. Нужно ориентироваться не на устройства, а на разрешения.
Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).
Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».
Как сделать один сайт для всех устройств
Вопросы, которые поднимал автор вышеуказанной статьи, уже довольно давно в цивилизованном мире обдуманы, и, более того, они уже решены.
Сейчас можно сделать 1 сайт с единственной версткой, который будет работать на устройствах, начиная с телефонов, заканчивая огромными телевизорами. Например, yiibu.com или alistapart.com (поуменьшайте окно браузера):
Все это называется «Responsive Web Design»
Responsive состоит из следующих техник:
Резиновый макет на основе пропорций (fluid grid)
Основная идея — формула для вычисления пропорций в процентах «target / context = result». Например, у нас есть макет psd с шириной 1000px. В нем есть два блока: один слева шириной 270px, другой справа 730px. Сверстаем мы их так:
.leftcolumn <
width : 27 % ; /* 270px / 1000px = 0,27 */
float : left ;
>.rightcolumn <
width : 73 % ; /* 730px / 1000px = 0,73 */
float : right ;
>Если внутри левого столбца будет еще один блок и, скажем, на макете он шириной в 170px, то для него поменяются цель и контекст, и код будет выглядеть вот так:
.leftcolumn .some-div <
width : 62 , 962963 % ; /* 170px / 270px = 0.62962963 */
float : left ;
>Резиновые изображения (fluid images)
Подстраивают свои размеры под блок родителя. Основная идея в неочевидном применении свойства < max-width: 100% >. Изображение с img < max-width: 100% >никогда не вылезет из своего блока-родителя.
Если блок-родитель меньше, чем размеры img, то изображение пропорционально уменьшится. Этот принцип применим как для img, так и для embed, object, video.
Media queries
Нужны для отображения макета, оптимизированного под разрешение, с которого в данный момент этот сайт смотрится. Это часть стандарта CSS, которая позволяет применять стили на основе информации о разрешении устройства.
Здесь базовые стили для глупых браузеров. Например , для телефонов не high-end уровня. Pocket Internet Explorer для Windows Mobile 6.5 здесь же : ) .
@media only screen and (min-width: 480px)
Здесь стили более разумных , но все еще мобильных устройств. Android , iPhone и так далее.
@media only screen and (min-width: 768px)
Планшеты в режиме portrait.
@media only screen and (min-width: 992px)
Планшеты в режиме landscape , нетбуки , ноутбуки , десктоп.
@media only screen and (min-width: 1382px)
Десктоп с большими разрешениями , телевизоры.
Mobile first
Это техника, при которой сайт верстается сначала для устройств с меньшими возможностями, а затем с помощью media queries добавляются возможности и плюшки.
Так глупые браузеры без media queries получат самый простой контент (например, на мобильных телефонах). А более продвинутые поймут и отрисуют страницу, беря во внимание media queries.
Ссылки
2. Единственная хорошая книга на эту тему — «Responsive Web Design». Написана Ethan Marcotte, который в общем и положил начало адаптивным макетам. После ее прочтения многое прояснится.
- media queries
- css
- html
- mobile first
- responsive web design
- адаптивный сайт
- адаптивный дизайн
14 марта 2016 г. Что выбрать: приложение, мобильная версия сайта или адаптивный дизайн?
В этой статье мы рассказываем, чем отличается мобильная версия сайта, адаптивный дизайн сайта и приложение для мобильного и делимся соображениями о том, что лучше выбрать, если вы хотите сделать свой сервис доступным для пользователей смартфонов и планшетов.
Количество пользователей мобильных устройств в мире растет и, согласно прогнозам, к 2020 году 6,1 миллиарда людей или 70% населения Земли будут пользователями смартфонов. Это означает, что в какой бы сфере не работала ваша компания, самое время задуматься о том, как стать ближе пользователям мобильных устройств.
Перед вами открывается несколько перспектив:
- Разработка мобильной версии сайта
- Создание мобильных приложений (для iOS, Android и, возможно, Windows Phone)
- Дизайн сайта с использованием адаптивной верстки
Разберемся, что происходит в каждом из этих случаев.
Создание сайта для мобильных устройств
Мобильный сайт — это специально созданная версия сайта, которую видят пользователи, когда заходят на вашу страничку с помощью браузера, установленного на смартфоне или планшете. В отличие от основной версии сайта, версия сайта для мобильных устройств адаптирована под просмотр на небольших экранах.
Например, вот как выглядит сайт Amazon на ПК (обратите внимание на сложное меню):
В мобильной версии меню с разделами открывается на отдельной странице, а для просмотра товаров на главной достаточно провести пальцем по экрану:
Интересно, что в США самый популярный мобильный сайт — это Buzzfeed. За ним следуют Answers.com, Wikia, Urban Dictionary и Bustle. В то же время список самых популярных сайтов по общему интернет-трафику вполне предсказуем:
Почему так получается? Ответ прост: у всех топовых веб-сайтов США есть собственное мобильное приложение, которым и пользуется большинство посетителей.
Если вы ограничены в бюджете или ваш сайт не является площадкой для продаж или социальной сетью, а просто содержит краткие сведения о компании, то вам подойдет дизайн и верстка сайта под мобильные устройства.
Но если ваша компания продает товары и услуги через Интернет, является новостным сайтом или социальной сетью, вам стоит инвестировать в нативные приложения для Android и iOS, ведь согласно исследованиям, пользователи проводят в них в 18 раз больше времени, чем на мобильных версиях сайтов.
Разработка мобильных приложений
Мобильное приложение — это специальная программа, разработанная с учетом требований и возможностей конкретной платформы, например Android или iOS. Чтобы использовать ее, пользователям понадобится зайти в магазин приложений (Google Play или App Store), найти ее среди других и установить на свое устройство.
Если разработка мобильных сайтов требует тестирования конечного продукта в разных мобильных браузерах, то при создании приложения приходится учитывать, что пользователи используют разные версии операционной системы. Например, вот данные об использовании разных версий операционной системы Android:
Как видно из графика, большая часть пользователей все еще на версиях KitKat, Lollipop и Jelly Bean, хотя для некоторых устройств сейчас уже доступна версия Marshmallow.
Следующая трудность связана с внешним видом приложения. Если дизайн мобильной версии сайта можно сделать практически таким, как сайт, который пользователи видят в обычном браузере, то приложение для сайта должно отвечать требованиям производителя ОС к интерфейсу пользователя. В этом есть свои преимущества: приложение для мобильного выглядит более «родным» для ОС и работает быстрее благодаря интеграции с платформой.
С другой стороны, в защиту мобильных сайтов следует сказать, что с ними проще наращивать трафик. Мобильные сайты для смартфонов выигрывают с точки зрения количества уникальных пользователей, но на приложения приходится больше уникальных действий (unique actions), т. е. опять же, в приложениях пользователи проводят больше времени.
Что же мы все таки рекомендуем: мобильный сайт или приложение? Если позволяет бюджет, мы советуем сделать отдельный мобильный сайт и приложения для Android и iOS. Это позволит максимально охватить рынок мобильных устройств.
Тем не менее, on-demand стартапы могут обходиться и просто приложением. Веб-сайт в таком случае заменяет посадочная страница, которая описывает основные возможности сервиса и призывает скачать приложение.
Разработка адаптивного дизайна
Если вы заказываете создание адаптивного макета сайта, то разрабатывать отдельную мобильную версию не требуется. Адаптивный дизайн сайта — это дизайн, который рассчитан на отображение на мониторах разного размера: от экранов смартфонов до широкоугольных мониторов. Мы уже рассказывали о создании адаптивных сайтов, поэтому отметим только основные их преимущества:
- Возможность показывать пользователям разный контент в зависимости от устройства.
- Простота внесения изменений. Если вы хотите добавить новый блок на сайт, это нужно будет сделать только один раз.
- SEO-преимущества. С адаптивным сайтом вам не нужно будет заниматься привлечением трафика на мобильную версию сайта.
Кроме того, адаптивные сайты для мобильных устройств рекомендует использовать Google. Но адаптивный веб-дизайн имеет и свои сложности:
- Требуется оптимизировать сайт для быстрой загрузки на мобильных устройствах.
- Появляется необходимость готовить изображения разного размера для настольных и мобильных устройств.
- Для устройств с маленьким экраном потребуется создать отдельное компактное меню.
- Увеличивает время тестирования сайта.
Кому в первую очередь нужен адаптивный дизайн? Корпоративным сайтам, блогам и новостным порталам — это те типы сайтов, которые пользователи привыкли пролистывать. Интернет-магазинам, у которых еще нет собственного приложения и мобильной версии сайта, тоже стоит задуматься об адаптивном дизайне. Хотя пока уровень конверсии для мобильных устройств ниже, чем для ПК и ноутбуков, количество заказов, осуществляемых со смартфонов и планшетов начинает расти: в 2014 году в США этот показатель составлял 19%, а в 2015 — уже 25%.
Студия stfalcon.com выполняет дизайн и разработку адаптивных сайтов и приложений для Android и iOS. Обратитесь к нам, и мы поможем вашей компании стать ближе пользователям мобильных устройств.
2 шага к построению адаптивной верстки Flutter-приложения
В этой статье речь пойдет о том, как создать Flutter-приложение, которое умеет адаптироваться к разным экранам и ориентациям. Статья будет полезна как начинающим, так и опытным пользователям Flutter. Первые найдут шаблон для изучения, вторые — еще один взгляд на этот вопрос.
Постановка задачи или проблемы адаптивной верстки
«Делай то, что тебе нравится». Flutter
Звучит как духовно обогащенный мотиватор, но это — реальный взгляд разработчиков фреймворка на эту проблему. У Flutter нет одного решения, «прибитого гвоздями», здесь у разработчика полная свобода и возможность выбирать способ решения этих проблем (заодно и собрать грабли по пути).
На данный момент Flutter поддерживает мобильные платформы (Android, iOS), Web, редко используется для desktop. Это значит, что приложение должно поддерживать широкий диапазон разрешений экранов устройств и ориентации. Также мобильное устройство (если оно не квадратное) может быть повернуто пользователем в портретную или ландшафтную ориентацию. Пользователи мобильных устройств любят и умеют это делать во время работы приложения, чтоб рассмотреть подробнее содержимое экрана. Так что, чтобы не разочаровывать пользователя, мы должны позаботиться о проблеме поворота экрана во время работы приложения.
И при всем этом приложению желательно еще и работать, отображая информацию о своей жизнедеятельности, несмотря на характеристики и параметры устройства, на которое его занесло, и на то, какие действия с ним может совершать пользователь.
«Смешать, но не взбалтывать». Проблема мультиплатформенного дизайна
Редко встретишь дизайнера, который понимает проблемы мультиплатформенного дизайна. И задача дизайнера Flutter-приложения — приготовить такой коктейль из элементов мобильного дизайна, который не вызывает отторжения у пользователя.
Ведь нужно как-то совместить эти элементы с привычным UX на платформах, на которых их раньше не было. Например, FAB (floating action button in material design) и другие элементы и подходы дизайна, привычные на мобильных платформах, на вебе и десктопе немного в новинку, и наоборот — приемы, привычные для веба, смотрятся диковато на мобилках.
Обычно обновления дизайна происходят итерационно. Так, дизайнер вряд ли сразу выдаст окончательный вариант под все ориентации и разрешения. Поэтому нужно предусмотреть возможность добавления и изменения, не трогая то, что уже работает.
Как это уже работает в Android
Проблема и способы ее решения известны. На Android в свое время это называлось отзывчивый (responsive) дизайн. По этому поводу даже есть даже целые гайдлайны: Responsive UI — Layout (правда сейчас уже в архиве), Support different screen sizes.
Как это выглядит на практике для разработчика? В самом начале существует один макет, к которому по мере необходимости добавляем макеты для разных по разрешению экрана устройств, а затем обе ориентации для каждого типа устройств. Далее эти макеты выбираются в зависимости от того, на каком устройстве (с каким разрешением) и в какой ориентации они работают.
Для экранов с большой площадью обычно используют макеты с большим количеством информации, которую можно отобразить. Хороший пример — master/detail flow из шаблонов новых приложений в Android Studio. Это классика того, как рекомендуется работать с экранами большой площади in android way.
Долго ли сказка говорится, начнем писать код. Для этого используем модную нынче методологию BDD.
Реализация
Перед тем как писать код, опишем сценарии:
- В пределах одного макета на разных устройствах с разной плотностью пикселей должно выполнятся масштабирование контента (как при использовании dpi указания размеров).
- Я хочу иметь возможность добавлять макеты в любом порядке (сделали макет для landscape — отлично, используем его везде, сделали для portrait — отлично, автоматически подставляем его для портретной ориентации).
- Я хочу иметь возможность добавлять макеты как в Android Studio для landscape, для portrait, для более широких экранов, для более узких.
- Добавление новых макетов не должно влиять на существующие макеты.
- Цепочка вызовов для созданного макета не должна без моего ведома изменяться со временем.
- Я хочу, чтобы логика выбора макета не изменялась, ее не нужно было изменять при добавлении/удалении макетов.
- Логика выбора должна быть одинаковой и предсказуемой.
Код примера, рассматриваемого в статье и пакет, его реализующий, находится по ссылкам:
Инициализация
Начнем с инициализации пакета. Вызов нашей MaterialApp оборачиваем в вызов инициализации виджета подстройки размеров виджетов под dpi экранов:
@override Widget build(BuildContext context) < return LayoutBuilder( builder: (context, constraints) < return OrientationBuilder( builder: (context, orientation) < SizerUtil().init(constraints, orientation); return MaterialApp(Этот код находится в example lib\main.dart
Шаг 1. Настройка виджетов под изменяемое разрешение экрана
Мы хотим отображать виджеты на разных экранах наиболее близко к задуманному при первоначальном дизайне. Эта часть заимствована из библиотеки sizer и работает так же как в ней.
Также можно использовать следующий метод, основанный на SizerUtil.orientation свойстве для более вариабельной настройки параметров виджета. Пример:
appBar: AppBar( title: SizerUtil.orientation == Orientation.portrait ? const Text('portrait') : const Text('landscape'), ),На AppBar выдается заголовок с названием текущей ориентации. Этот код находится в example lib\screens\home_screen.dart
Проверим соответствие сценариям.
Этот способ выполняет наше пожелание из пункта 1 списка Перед тем как писать код, опишем сценарии: «1. В пределах одного макета на разных устройствах с разной плотностью пикселей должно выполнятся масштабирование контента (как при использовании dpi указания размеров)».
Шаг 2. Используем специализированный виджет для работы с разными разрешениями экрана и ориентацией
Поддержка изменения ориентации и переключения виджетов под разные размеры (разрешения) экрана реализована с использованием виджета ResponsiveWidget. В его поля мы подставляем макет (виджет) для каждой пары разрешения/ориентации. В начале у него есть одно обязательное поле (по аналогии с default xml in android) landscapeLargeScreen. Дополнительные виджеты под другие значения разрешения/ориентации опциональны, т.е их можно добавить по мере появления:
- landscapeMediumScreen
- landscapeSmallScreen
- portraitMediumScreen
- portraitSmallScreen
- portraitLargeScreen
В приведенном ниже примере с помощью виджета WelcomePage создается страница в ориентации landscape и строится макет с использованием прокрутки контента в вертикальной плоскости, а для ориентации portrait используется такой же виджет с таким же набором страниц, только контент прокручивается в горизонтальной плоскости:
body: ResponsiveWidget( landscapeLargeScreen: WelcomePage( pageIndex: 0, scrollDirection: Axis.vertical, children: listOfPages, ), portraitLargeScreen: WelcomePage( pageIndex: 0, scrollDirection: Axis.horizontal, children: listOfPages, ), ),Мы получили экран, который имеет разные макеты для портретной и альбомной ориентации. Когда устройство меняет ориентацию, мы перестраиваем наш макет.
Как мы обнаруживаем изменения ориентации? Мы смотрим на отношение ширины к длине страницы. И в зависимости от этого переключаем макеты.
Проверим соответствие сценариям
Это выполняет наши пожелания, указанные со 2 по 7 пункт из Перед тем как писать код, опишем сценарии:
2. Я хочу иметь возможность добавлять макеты в любом порядке (сделали макет для landscape — отлично, используем его везде, сделали для portrait — отлично, автоматически подставляем его для портретной ориентации).
3. Я хочу иметь возможность добавлять макеты как в Android Studio для landscape, для portrait, для более широких экранов, для более узких.
4. Добавление новых макетов не должно влиять на существующие макеты.
5. Цепочка вызовов для созданного макета не должна без моего ведома изменяться со временем.
6. Я хочу, чтобы логика выбора макета не изменялась и ее не нужно было изменять при добавлении/удалении макетов.
7. Логика выбора должна быть одинаковой и предсказуемой.
Выводы
По рецепту из моей статьи можно приготовить приложение, в котором размер и ориентация экрана на всех 3-х платформах будут работать одинаково. Надеюсь, этот способ будет полезен и в вашем приложении.
Буду рад общению по теме (и не по теме тоже :)) в комментариях.
К статье добавил опрос, результаты которого помогут мне выбрать тип приложения, который я возьму в качестве примера для второй части статьи. В ней я собираюсь более подробно остановиться на виджетах, помогающих сделать приложение отзывчивым. А также хочу рассказать о некоторых нюансах работы с ними в сравнении с элементами дизайна, принятыми в Android. Также хочу рассмотреть способы автоматического импорта дизайна из Figma.
Код примера, рассматриваемого в статье, и пакет, его реализующий, находятся здесь:
→ Пример — в папке example
- Responsive UI - Layout
- Support different screen sizes
- Floating action button in material design
- Cross-platform guidelines
- Desktop and tablet navigation
- Flutter Web: Getting started with Responsive Design
- Develop A Responsive Layout Of Mobile App With Flutter