Как написать хороший html & css код с помощью webflow

Введение

Хотелось бы начать с того, что я уже бывалый верстальщик и в целом произвел сотни работ, однако, как бы я ни старался, на средний лендинг уходит порядка 5 часов, а постдоработка еще часа 2-3.

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

Пару лет тому назад было приложение, которое подавало надежды — Macaw. Хоть оно и было тормознутым, однако на выходе был идеальный код, мог сам руками дописывать что нужно + удобная работа с адаптивкой. Но пздц, подкрался незаметно и разработчиков выкупила invision и проект загнулся.

Однако примерно в это время, на рынок вышел сервис webflow со своим продуктом, к которому я отнесся очень скептически из-за того, что это исключительно web-приложение. А мне хотелось работать и offline.

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

Проектирование в Google Drive

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

Я предпочитаю проектировщик Google Drive по нескольким причинам:

• Социальная и совместная работа. Google предоставляет возможность обмена информацией лучше, чем кто-либо другой. Контекстные комментарии, одновременное редактирование и интеграция Hangout. Я влюблен.
• Автоматические направляющие. В каждом документе направляющие создаются автоматически на основе размеров каждого элемента, введённого в документ. Это позволяет легко изобразить последовательные размеры элементов документа, что отлично подходит для таких одержимых сетками дизайнеров, как я.
• Я делюсь с клиентами этими вайфреймами и они выглядят очень профессионально,  что является большим плюсом.

Тем не менее я не ограничен направляющими и нахожу GDDA (Google Drive Drawing App) отличной альтернативой макетам приложений, которые пытаются ограничить вас границами сетки.

О, и это бесплатно. Надо ли говорить больше?

Что такое сетка?

В веб-дизайне макет сетки – это способ структурирования и организации содержимого страницы, такого как текст, изображения, кнопки и другие элементы. Макет сетки сегментирует веб-страницу на столбцы одинаковой ширины. Элементы размещаются и выравниваются в границах этих столбцов.

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

Сегодня используется много сеточных систем, одной из самых популярных является вариант с 12 столбцами системы 960 Grid System.

Эта система делит ширину страницы на 12 столбцов шириной 60 пикселей каждый, разделенных промежутками в 20 пикселей. Дизайнеры нелестно называют промежутки между колоннами «желобами».

Грид-системы, такие как 960, очень и очень распространены в Интернете – они используются в дизайне подавляющего большинства веб-сайтов. Хотя трудно получить точное количество, я готов поспорить, что по крайней мере девять из 10 ваших наиболее часто посещаемых сайтов, вероятно, в какой-то степени следуют макету сетки. Чтобы увидеть наглядный пример функциональной сетки, посетите нашу страницу блога :

Но почему в первую очередь сетки так популярны? Макет сетки позволяет веб-дизайнерам и веб-разработчикам:

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

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

Однако нет правила, согласно которому ваш веб-сайт должен следовать сетке. Если вы не боитесь создавать больше и отказываться от условностей, чтобы создать выдающийся сайт, подумайте о том, чтобы «сломать сетку».

Обзор отзывчивости

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

Термин отзывчивый веб-дизайн сам по себе придумал и в значительной степени разработал Итан Маркотт. Многое из того, что рассмотрено в этом уроке было впервые сказано Итаном в сети и в его книге Отзывчивый веб-дизайн, которую стоит прочитать.

Рис. 4.01. Food Sense имеет красивый дизайн, отзывчивый при самых разных размерах окна. Независимо от того, насколько экран большой или маленький, сайт Food Sense подстраивается под него, создавая естественный пользовательский опыт.

Отзывчивый, адаптивный и мобильный

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

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

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

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

Область применения APF

Разнообразие современных проектных практик даёт возможность выбирать их согласно принципу целесообразности в зависимости от:

• объёма деятельности компании,
• определённости требований,
• базовой обеспеченности ресурсами,
• качественного анализа рисков и др.

APF в качестве части «гибкого» менеджмента начал формироваться в начале 21 века в США как ответ на управленческие сложности, которые возникали в IT-индустрии при ведении проектов. Большинство таких проектов не имело чётко сформулированных знакомых требований на начальном этапе. Их нужно было формулировать в ходе процесса, ориентируясь на обратную связь от потребителей (заказчиков), которые корректировали своими предпочтениями ход создания продукта. На начальном этапе APF формировались только стратегические требования с общим описанием возможностей и функционала. А корректировка промежуточных результатов с добавлением новой ценности продукта происходила после каждой итерации (этапа).

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

В России привлечение опыта проектного подхода изначально было ориентировано на долгосрочные и крупномасштабные проекты, поэтому первыми «пришли» модели и методологии стандартного (традиционного) семейства, а также новые проектные практики, которые в большей степени подходили структурам со сложившейся иерархией функциональных подразделений (отделов отвечающих за свой сегмент работы). Общими чертами таких методологий были:

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

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

Ценообразование

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

Для тех, кто владеет своим сайтом и хочет только один или два сайта, план сайта, вероятно, будет там, где вы хотите быть. Для тех, кто является веб-дизайнерами / разработчиками, которые планируют использовать Webflow в качестве инструмента для разработки сайтов для передачи клиентам, планы учетных записей, вероятно, больше подходят (особенно если вы хотите загрузить свой сайт из Webflow и использовать его где-нибудь еще., например, на вашем собственном сервере или с помощью CMS, например WordPress).

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

Цены на Webflow отлично подходят для тех, кому нужен всего один или два сайта. Однако это может обойтись довольно дорого для тех, кто хотел бы иметь сразу несколько сайтов. В некоторой степени связан с ценообразованием еще один недостаток (возможно, в большей степени недостаток для более опытных пользователей): возможность спроектировать, а затем экспортировать свой сайт для последующего использования / изменения для другой платформы (такой как WordPress) — не самый лучший вариант, и требует, чтобы вы ежемесячно платили за эту возможность, даже если вы решите не запускать / размещать свой сайт в Webflow.

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

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

Примеры сайтов на Webflow

На официальном сайте Webflow есть целый раздел «Showcase», где выложены примеры удачных проектов. Разберем несколько из них.

Пример №1. Инновационная продукция для спорта — https://www.leadsportsaccelerator.com/.

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

Пример №2. Сайт-визитка битмейкера — http://mecca83-site.webflow.io/.

На фоне главной страницы располагается видео музыканта, который играет на драм-машине, создавая композиции для хип-хоп исполнителей. В разделе Samples можно послушать их примеры, интегрированные с Soundcloud.

Пример №3. Сайт профессионального велосипедиста Скотта Дэвиса — http://scottdavies.co.uk/.

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

Различных визиток на Webflow Showcase очень много, но онлайн-ритейлеры встречаются не часто. Сайт по продаже кофе имеет интересные анимационные эффекты в меню, качественный слайдер. Товары оснащены особым оформлением с различными значками и картой мест, где собраны кофейные зерна.

Пример №5. Сервис по организации активных развлечений — https://www.fit4adventure.com/.

Главная страница имеет слайдер, где показываются видео различных видов отдыха: катание на байдарках, лошадях, подъем в горы и т.д. На сайте можно заказать путешествие на Аляску, в Норвегию, Марокко и другие места.

Управление фактическими изменениями

В стандартной модели APF управление фактическими изменениями проявляется в следующих общих для любой отрасли формах:

• Корректировка расписания. В зависимости от свойств процесса увеличивается или уменьшается длительность этапов проекта.
• Изменение приоритетов. Здесь меняется план незавершённых работ в зависимости от результатов анализа предыдущих этапов.
• Перераспределение ресурсов. В случае отсутствия собственных специалистов, привлекаются люди с необходимыми профессиональными навыками со стороны. Они могут работать либо на одном этапе проекта (например, для ускорения при несоблюдении сроков), либо на постоянной основе.
• Тесное сотрудничество с заказчиком. (На месте заказчика может быть потребитель или спонсор проекта). При таком сотрудничестве и взаимодействии своевременно выявляются и исправляются несоответствия, а результат корректируется под ожидания.
• Отсутствие бумажной волокиты. Сокращаются затраты и время на обработку избыточной документации (актов разногласий, запросов на изменения, дополнения к договору и др.). Ожидаемые изменения сразу по ходу развития проекта не предполагают переделок после завершения всего проекта, поскольку все ценные изменения вносятся в ходе воплощения.

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

Его эффективность косвенно подтверждается ещё и тем, что PMI (Институт управления проектами) включил итеративные и адаптивные практики в последнее издание PMBoK – Свода знаний проектного менеджмента, что предполагает возможность применения адаптивных методов и для крупных проектов.

Финальное сравнение

Adobe Muse: единственное из всего сравнения десктопное приложение; множество и множество плагинов доступно для загрузки и покупки, с которыми вы сможете создавать очень крутые проекты.

ReadyMag: многообещающая разработка, каждый месяц появляются новые крутые фишки, направленные именно на создание сайтов; более 100 шрифтов доступно к использованию — как коммерческих, так и бесплатных; с десяток бесплатных шаблонов, которые вы можете использовать для создания своих проектов.

WebFlow: наиболее приближенная к реальной работе верстальщика визуальная верстка; проекты создаются долго, зато все на 100% будет работать и располагаться на нужных местах; есть готовые шаблоны, но быстро их использовать получится только в случае замены всех текстов и картинок без изменения их местоположения.

Avocode: бета-версия программы, которая по обещаниям будет самой быстрой из всех в плане визуальной верстки; пока сложно говорить точнее — как только сможем протестировать, сразу же расскажем.

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

Что важно учесть при построении User Flow: 8 советов для дизайнеров

User Flow может выглядеть совершенно по-разному, но вне зависимости от этого, каждая диаграмма пользовательского пути должна иметь 8 следующих ключевых элементов:

1. Название с полезным действием

Дайте вашему User Flow содержательное имя, с сутью в корне. Например, вы можете назвать так «Вызов такси к дому до офиса» или «Заказ пиццы и других ништяков на компанию из 7 человек ко дню рождения друга».

2. Все движутся только в одном направлении

При таком подходе у вас будет ясный маршрут из (A) → (B). Стремитесь к балансу функциональности и лаконичности. Избегайте превращения простой прямой в запутанный клубок разнонаправленных сценариев.

3. Одна цель на Flow

Чтобы понять эту концепцию, то просто представьте, что вас просят обновить фото вашего профиля во время публикации сообщения!

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

4. Добавьте легенду

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

5. Определитесь с точкой входа

У каждой диаграммы должна быть ясная точка входа. Тогда каждый в команде сможет однозначно читать диаграмму путешествия из (A) → (B) и вовлекаться в развитие продукта.

7. Цвета со смыслом

User Flow обычно выполняют в функциональном минималистичном монохроме

Такой подход помогает сосредоточиться на функции и цели и концентрирует внимание только на важных вещах

8. Проверьте достижение цели

Всегда проверяйте, что ваши User Flow действительно помогают достигать значимых для пользователей целей. Минимизируйте неопределенность и, если требуется, проведите дополнительные исследования.

Что такое Webflow

Webflow.com — это платформа для создания веб-страниц и их публикации, основанная 5 августа 2013 года разработчиками в Сан-Франциско, штат Калифорния. Она отличается от популярных конструкторов сайтов на русском языке таких, как Wix или uKit, тем, что предоставляет пользователю гораздо больше возможностей.

Уникальная особенность Webflow в том, что здесь можно создавать потрясающие анимационные эффекты. Кроме того, в рамках платформы объединены: визуальный редактор веб-страниц, встроенная CMS для быстрого управления контентом и товарами магазина, а также сервис для работы с HTML, CSS и JS-кодом сайта при помощи функции экспорта.

Универсальные строительные блоки

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

Универсальные элементы управления гарантированно работают на всех устройствах с Windows — от смартфонов до дисплеев Surface Hub. Они охватывают весь спектр — от стандартных элементов управления на формах вроде кнопок-переключателей и текстовых полей до изощренных элементов наподобие сеточных и списочных представлений, которые способны генерировать списки элементов на основе потока данных и шаблона. Эти элементы управления поддерживают ввод и применяются с должным набором возможностей ввода, событий и общей функциональности для каждого семейства устройств.

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

• набор стилей, автоматически дающих приложению выбор между светлой или темной темой и способных включать предпочитаемый пользователем акцентный цвет (accent color);
• набор шрифтов на основе Segoe (Segoe-based type ramp), который обеспечивает четкость текста на всех устройствах;
• анимации по умолчанию для взаимодействий;
• автоматическую поддержку высококонтрастных режимов. Эти стили разрабатывались с учетом высокой контрастности, поэтому, когда приложение выполняется на устройстве в высококонтрастном режиме, оно должным образом отображает шрифты;
• автоматическую поддержку других языков. Стили по умолчанию автоматически выбирают правильный шрифт для каждого языка, поддерживаемого Windows. Вы даже можете использовать несколько языков в одном приложении, и тексты на всех языках будут отображаться корректно;
• встроенную поддержку для чтения справа налево.

Наконец, UWP предоставляет универсальные шаблоны для Adobe Illustrator и Microsoft PowerPoint и содержит все необходимое для того, чтобы приступить к проектированию UWP-приложений. Эти шаблоны содержать универсальные элементы управления и разметки для каждого универсального класса размеров устройств. Чтобы скачать эти шаблоны, перейдите в раздел скачивания Design на сайте Windows Dev Center (bit.ly/1KHun6J).

Дисплей

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

MediaQuery

Вы наверняка уже использовали MediaQuery при разработке на Flutter. MediaQuery дает вам доступ к множеству свойств, описывающих текущий пользовательский контекст.

Поскольку это InheritedWidget, у вас будет доступ к нему из любой точки дерева виджетов. Если вы не знакомы с таким видом виджетов (я настоятельно рекомендую посмотреть это видео из цикла Flutter 101), любой дочерний виджет из дерева, читающий данные InheritedWidget, будет перестроен автоматический каждый раз, когда эти данные меняются.

@override
Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    // Rebuilt every time a property of media query changes
    // ...
}

Размер экрана

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

Для получения актуального размера окна приложения, используйте свойство size из MediaQuery. Опять-таки, если размер окна меняется, метод построение вызывается автоматически.

@override
Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);

    if (mediaQuery.size.width > 1024) {
      return LargeLayout();
    }

    if (mediaQuery.size.width > 332) {
      return MediumLayout();
    }

    return SmallLayout();
}

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

Разрешение экрана

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

Каждый экран имеет определенное разрешение в пикселях. Грубо говоря, это то, сколько пикселей вы можете вместить в пространство вашего экрана (к примеру, в квадрат 1х1 дюйм).

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

Получить плотность экрана devicePixelRatio из MediaQuery.

@override
Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);

    if (mediaQuery.devicePixelRatio >= 2) {
      return HighDefinitionVideo();
    }

    return LowDefinitionVideo();
}

Пример использования: вы можете сэкономить трафик сети, доставляя видео из интернета в более низком разрешении для устройств с меньшим разрешением, поскольку они не увидят разницы с HD-видео.

Отступы экрана

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

Чтобы узнать, какие области экрана ограничены «челкой» и скругленными краями, используйте свойство padding из MediaQuery.

@override
Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    return Padding(
      padding: EdgeInsets.only(
        top: mediaQuery.padding.top,
      ),
      child: Child(),
    );
}

Flutter также дает вам виджет для этой задачи: SafeArea.

@override
Widget build(BuildContext context) {
    return SafeArea(
      left: false,
      right: false,
      bottom: false,
      child: Child(),
    );
}

Еще одной помехой может стать клавиатура ПО. Используйте свойство viewInsets, чтобы добавить необходимые поля. Scaffold автоматически управляет этим за нас. Но иногда может быть полезно работать с этим напрямую.

@override
Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    return Padding(
      padding: EdgeInsets.only(
        bottom: mediaQuery.viewInsets.bottom,
      ),
      child: Child(),
    );
}

Специальные возможности (универсальный доступ)

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

И снова эти два свойства доступны в MediaQuery:

@override
Widget build(BuildContext context) {
  final mediaQuery = MediaQuery.of(context);
  return Text(
    'Hello!',
    textScaleFactor: mediaQuery.textScaleFactor.clamp(1.0, 1.5),
    style: TextStyle(
      fontFamily: mediaQuery.boldText ? 'LightFont' : 'BoldFont',
    ),
  );
}

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