No video :(

Responsive Layouts for Responsive Apps

Подписаться 32 тыс.

Просмотров 9 тыс.

50% 1

With Flutter Web coming out responsive layouts are a must! There are 8 different ways to deal with responsiveness. As long as you get a good grasp on these you should be able to create apps that look beautiful on every platform
Source Code: github.com/tad...
Support Me
✦ GitHub Sponsors: github.com/spo...
✦ Patreon: / tadaspetra
Connect With Me
✦ My Website: tadaspetra.com/#/
✦ Live Coding: / tadaspetra
✦ Twitter: / tadaspetra
✦ Chat on Discord: / discord
✦ Instagram: / tadaspetra
My Top 5 Books:
✦ Brave New World - Aldous Huxley: amzn.to/2JyaK96
✦ 1984 - George Orwell: amzn.to/3lmLzUk
✦ The Millionaire Fastlane - MJ Demarco: amzn.to/2ViGthn
✦ The 4-Hour Workweek - Timothy Ferriss: amzn.to/3mnypYD
✦ Homo Deus - Yuval Noah Harari: amzn.to/2VlFRYe
RU-vid Gear
✦ MacBook Pro 16 inch: amzn.to/3qe4MeF
✦ MX Master 3 Mouse: amzn.to/2VlkZQS
✦ Canon Rebel SL3: amzn.to/2ViIfPv
✦ Hiearcool USB Hub: amzn.to/3llsIsP
✦ iPad Pro 12.9 (3rd Generation): amzn.to/36kaVy0
✦ Apple Pencil (2nd Generation): amzn.to/2JoHy4y
✦ Yeti Microphone: amzn.to/37oRNOq
✦ Rode Boom Arm: amzn.to/3lnEKCb
✦ Blue Radius II Shock Mount: amzn.to/2JoIfea
✦ Blue RPop Filter: amzn.to/39rQSiZ
✦ Sony WH1000XM3: amzn.to/3moWgHh
Thank you for watching!
#Hashtags here

Опубликовано:

26 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 27

3 года назад

I would like to point out a important difference between MediaQuery and LayoutBuilder. If you use then as parent of your page, sure, they will work the same. However, while MediaQuery returns the dimensions of the screen, LayoutBuilder returns the dimensions of the available space (determined by the constraints passed from the parent to its child)

@tadaspetra 3 года назад

Yes! I actually meant to mention that in the video, but I guess I missed it. I will pin your comment. Great catch!

@mnc12004 2 года назад

I have an in production with many screens. To get it working on Web and desktop to, I need to sort out the layouts for bigger screens. Not really sure how to achieve it, but yep loads research and trial and error. Thanks loads for this video. Points me in the right direction...

@JigneshWorld 3 года назад

Thanks much, nice video and fundamental building blocks to have responsiveness on your flutter app. AFAIK: MediaQuery and LayoutBuilder will have a different use-case MediaQuery - It will provide size of the current media (e.g., the window containing your app). This is useful to know size of the app window when app used in mobile full screen, part of screen with picture in picture mode, foldable device or desktop app window or browser window size. LayoutBuilder - It will provide constraints of parent to it's child to render widget accordingly. This is useful when the parent constrains the child's size and doesn't depend on the child's intrinsic size. e.g. auto size text

@tadaspetra 3 года назад

Yes you are correct!

@christianmarpert3844 3 года назад

Thks mate! nice explanation! For my purposes I createt a deviceSettings class containing all relevant properties. In a next step I use a function returning a deviceSetting object, depending on the device I pass in(mobile, tablet, laptop). To get the device itself I use the GetX package. Maybe there are simpler ways, but works pretty well for me. And I can incorporate some of your tips ;). Cheers

@mithson 3 года назад

Nice video bro, great work keep doing it

@ebenezervampu7882 Год назад

Thank you so much

@chipekowasa6571 2 года назад

Awesome 👏👏👏

@silas_wolf 3 года назад

THANK YOU!!!

@tadaspetra 3 года назад

Happy to help!

@festusikperha6528 3 года назад

So awesome

@michaelkalango5779 3 года назад

Nice! Thanks for the video..

@tadaspetra 3 года назад

Thanks for watching!

@marufhassan634 3 года назад

Its all fine and good but we need a simpler way for responsiveness of the app's height, width and fontSize. All these values are provided by the designer in Figma and I can't keep using hit and try method to find the percentage or ratio it works out with. We need a simple widget that takes in exact value and resizes the fontSize and text according to the screen change.

@tadaspetra 3 года назад

You could use this. pub.dev/packages/auto_size_text