How to Make Responsive Flutter Apps, Pixel Perfect

Using scale to make it responsive
Join the Design 2 Flutter Challenge at: / challenge_1_social_med...
Download start project here: github.com/happyharis/social_...
Join the Discord Group: discord.learnfluttercode.com
👉 Subscribe to our weekly Flutter newsletter:
learnfluttercode.com/newsletter
📱 Pre Sign Up to Learn Flutter App :
learnfluttercode.com/app
Check out our website - learnfluttercode.com/
🔥 Check out our courses -
🖼 Learn Flutter Code Instagram:
/ learn.flutter.code
🖼 Learn Flutter Code Facebook:
/ learn.flutter.code
Haris's LinkedIn - / haris-samingan-7889b9140
Haris's Twitter - / thehappyharis
⏰ Timeline:
00:00 - Introduction
05:37 - Breakdown of User Stats UI
06:07 - Spread Operator
08:46 - Test with iPhone Pro Max 11
13:50 - Summary

[@isurujn]

This is a great series. Learned quite a lot. I wish these types of videos continued.

[@lucasdiogomelo520]

i was searching for these explanation for months. I'm glad you came with it

[@1995taunus]

Thank you!

[@mracipayam]

Thanks great explanation

[@Opeyemi.sanusi]

More responsive videos please 🙏🏿

[@YandryPozo]

That perfect pixel plugin is pure gold 🪙 Thanks for sharing, excellent video 👌

[@i5c5e5n8]

do you have any idea how flutter handles this while maintaining image quality? does it apply an antialiasing algorithm? also, do you know if this is good performance-wise or not?

[@kanishthasahu4447]

great tutorial

[@AdityaBolt]

Safearea has a minimum parameter which could technically be used instead of padding.

[@tejasshukal762]

Can we calculate mockupWidth and mockupHeight dynamic because you have set this for only iPhone 11 pro but I need pixel perfect in all devices.

[@freakout6764]

thank you

[@m.tirtarachmanmahieu3406]

interested! subscribe, thanks dude this video really help full 👍🏻

[@SahilKhan-uj7iw]

It will work for sizebox heigth or any heigth parameter how can we use it for heigth of widget for responsive ness

[@FreddyRFebres]

What is the add-on used to only remark the error line with it message instead of the entire widget?

[@hexafgamer]

its perfect design but what we do other phone resolution ?

[@melomanzer5508]

God bless you

[@momenahmed6839]

The same ratio in text /mocup then * width To the test scale width /mocup

[@evolade4044]

Background music?

[@awais.16]

How to adjust that picture according to our screen , so that it fits according to our screen height and width

[@lucasdiogomelo520]

Try to use Fittedbox it might help

[@benjieming7232]

You can use fit: BoxFit.fill or BoxFit.cover (this is better option), and FittedBox is most likely to use with Text widgets.

[@DarkHeros09]

Adding padding before scaffold results in black bars from all the sides. any solutions?

[@OzzyOzmenCelik]

u should follow scaffold - safe area (top:false , bottom:false) - padding - etc...

[@Ali-cb3xt]

👍👍🔥

[@Blues_unicat]

This scale factor like text scaling should be called Adaptive not Responsive.

[@ericchua3492]

iPhone 12 pro works fine, but not iPhone 12 pro max.. ouch!

[@hunter85070]

i didn't like, cause u need exactly the size of the screens.. it would be nice if just take the dispositive viewports and make the calculus automaticly

[@i5c5e5n8]

do you have any resource that explains how to do that??

[@navasjaseer7508]

Hh

[@hyungtaecf]

Didn’t like the pixel perfect approach… It doesn’t look professional

[@charith2967]

May I know what are the other ways to achieve this. Any url?