Flutter - about adapting the application screen (you need to know this)

Go to the TG chat "Dart and Flutter in simple words" t.me/dart_flutter_prostymi_sl... and discuss the lessons learned.
In this video I will talk about the nuances of adaptive layout on Flutter. I'll tell you how to use dynamic height and width.
The default unit in Flutter is DP (density independent pixel). Different devices have different screen sizes and resolutions, resulting in different pixel ratios. DP (DIP) is designed to allow you to create widgets that are roughly the same size visually, regardless of device.
px (Pixel) - depends on density and not the same physical size
in (Inch) - does not depend on density and the same physical size
mm (Millimeter) - 25.4 inches, does not depend on density and the same size
pt (Point) - 72 inches, independent of density and the same size
dp (Density Independent Pixel) - ~160 inches, density independent, not the same physical size
sp (Pixel independent of scaling) - ~160 in inches, density independent, not the same physical size

[@stolets]

*Знаешь почему стоит пойти ко мне учиться?* *Не сложно!* 👇 Я лично обучаю и делаю это «простым и доступным языком», тебе будет понятно всё что необходимо *Не долго!* 👇 Ты легко освоишь навык разработки приложений всего за 2 месяца *Не дорого!* 👇 Стоимость обучения в разы меньше по сравнению с остальными курсами Flutter (стоимость уточнить можно в ЛС) *Нужно немного твоего времени!* 👇 Каждую субботу будет наш созвон в Zoom и всего на 2 часа (созвон всего лишь раз в неделю) *С домашним заданием!* 👇 Ты будешь получать домашнее задание которое надо выполнить в течении недели и я лично буду проверять ДЗ и давать комментарий *С практикой!* 👇 Ты сделаешь учебный проект и получишь задание делать свое собственное приложение *Не скучно!* 👇 На созвоне я всегда всех призываю активничать и перебивать меня, я всегда хочу получать вопросы и тут же отвечать на них *Перспективно!* 👇 Выпускников я зову на свой практикум, где мы вместе будем делать бизнес на приложениях (зарабатывать на продаже премиум подписках в приложениях) *Остались вопросы?* Ниже контакты, просто напиши мне!
 Telegram: t.me/stolets
 WhatsApp, Viber, SMS: [phone]
 [phone]
 [phone]
 (на обычный звонок не отвечаю, по причине частого спама) Vk: vk.com/stolets Instagram: instagram.com/sto_lets Email: ip.stolets@yandex ru

[@PaulSith]

Полезное видео ... кроссплатформенность и масштабирование элементов это нынче тяжко)

[@dan.gorbunov]

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

[@stolets]

Может сделаю позже такое видео. Спасибо за комментарий

[@user-ly7fn6xu2g]

Спасибо.

[@redjohn4626]

ещё вроде можно сделать double.infinite

[@user-jn1fl5sw3o]

Оно не всегда работает как надо, есть нюансы

[@ai-bloggers]

Дим, отдельную переменную для этой формулы - это значит новый файл дарт создать и в нем виджет?

[@stolets]

Нет. Отдельная переменная - это просто до return создаешь переменную и туда помещаешь код MediaQuery …

[@ai-bloggers]

@@stolets ээээ. Ладно, дойдём до этого

[@dev-eugene-kei]

@@ai-bloggers Вместо того, чтобы везде, где нужен размер экрана, писать длинную строку MediaQuery.of(context).size.width, можно создать переменную например double width = MediaQuery.of(context).size.width; и использовать везде переменную width.

[@blacksunpoetry8364]

А если достаточно большая концентрация виджетов на экране(например экран авторизации в приложение) и нижний виджет никак не влезает, Singlechild не подходит, изменить размеры текста и кнопок тоже нельзя, а нужно вместить.. спасибо за видео!

[@stolets]

Sizer пакет рассмотрите

[@ai-bloggers]

Так, например, у меня есть контейнер, где with: 200, heigh: 400. Вот как сделать, чтобы на всех смартфонах было одинаково?

[@stolets]

Используй: MediaQuery.of(context).size.width или MediaQuery.of(context).size.height И ты можешь математические операции делать. Например: MediaQuery.of(context).size.height / 2 Высота экрана делится на два

[@ai-bloggers]

@@stolets а, и примерно подгонять, чтобы смотрелось четко на экране, да?

[@stolets]

@@ai-bloggers ага

[@ai-bloggers]

Так, а если мне не надо на всю ширину экрана? Нужна карточка с конкретным размером?

[@stolets]

Ну если использовать «твердую» ширину. То желательно чтоб не больше 240 была. Все что выше лучше делать динамическим

[@kanagatkaparov4]

А вы использовали библиотеку screen_util для адаптивности

[@stolets]

Нет, но смотрел ее

[@peekors8829]

И есть подобные пакеты

[@user-cj2my1tg7q]

Я использовал в коммерческих проектах - крутой пакет

[@Unrealchik]

Дмитрий, включите, пожалуйста, субтитры. Они не доступны. Спасибо!

[@stolets]

Включу. Спасибо что сообщили)

[@Unrealchik]

@@stolets Спасибо заранее :)

[@stolets]

@@Unrealchik во всех видео включил субтитры! Спасибо еще раз за совет.

[@elkaigolka7349]

Блин, как по заказу)

[@skyonavelight2221]

Го гайд по изолятам

[@stolets]

Есть в планах

[@konstantin-svahuman8630]

Идиократия какая-то. За 30сек можно объяснить а не 10мин целый то да потому.