Flutter Tutorial - Super Quick Way To Create Pixel Perfect Responsive UI

In this is Flutter tutorial, I have discussed how we can convert the design in to real Responsive Flutter Application using some tricks.
GitHub : github.com/themaaz32/responsi...
Design Courtesy : Asma Riaz (dribbble.com/therightasma)
SUBSCRIBE THE CHANNEL.
SUPPORT ME:
Buy me Coffee : www.patreon.com/user?u=56943416
FOLLOW ME:
Twitter : / maazaftab1
Facebook : / themaaz32
Instagram : maazaftab
LinkedIn : / themaaz32
FOR PROJECT INQUIRY CONTACT:
Email : [e-mail]

[@MohsinKhan-lu6kc]

You are using column in the screen full of text fields, imagine user clicks on the text field keyboard pops up, either he will not be able to scroll or he'll be getting render flex errors because the widgets are not closed in expanded or flexible. Correct me if I am wrong.

[@EasyApproach]

Wrap column in singlechildscrollview or falsify the property resizeToAvoidBottomInset

[@dangdatraymonddelmut3230]

Exactly the issue I had and I felt misled ! With the title of this video you should have considered this. Nice video tho

[@EasyApproach]

Sorry I missed it.

[@emmanuelolajubu4144]

@@EasyApproach does it work for desktop or web

[@AbdulMalik-uw1hy]

Use list view no column

[@divinemaredi4138]

Thanks a lot! This plugin is exactly what I was looking for!

[@swayamshreemohantyvlogs8126]

Just amazing man. This package and your tutorial are just save me.

[@usr829]

Really Great Explanation. Please upload more flutter-related videos. Our support is always there

[@hamzakhan-un3yd]

Great video ❤️ very well explained. Was finding this kind of tutorial for a long time.

[@deanjackson3238]

Thanks alot, you saved me alot of time later, first time using flutter, i thought is was doing it auto, but after testing on multiple devices, the result are sometime terribles, thanks to you, now it is solved !

[@user-qt2cv7cv2f]

I really needed this tutorial. Thanks

[@kyrieirving6301]

Such a good explain. You did a really good video mate.Thank you very much!

[@rezwansaki]

This is awesome tutorial. Easy and perfect. Thanks for this tutorial

[@samiulislam_live]

Excellent tutorial. Thank you so much for this content. Really helped me a lot.

[@bluyetiinc7553]

Amazing tutorial. Best one I have found with respect to responsive design. Really makes it straightforward. Thank you. Subscribed.

[@EasyApproach]

Thanks. Please subscribe the channel :)

[@HassanAli-od8gx]

Straightforward explaination that is what i like the most, Channel Subscribed.👍

[@marctre9004]

Thanks so much for the tutorial...thought my app won't be fixed ...been looking for a better solution ...thanks so much

[@newbee936]

Thanks alot ... it was a great help

[@ucminhnguyen7522]

it's like your name, easy to understand. thank u so much

[@iliyamirzaei1860]

It was very helpful, thanks! ❤️

[@GAMEOLOGIST]

Nice Tutorial !! Easy to understand !!

[@iamuzairaslam]

JUST LOVED IT!

[@mr___rapp]

Thank you, I am a rookie battling with render flex errors, I am sure this will save me from that

[@hassantariq6645]

Thank you so much you are doing very well 🥰

[@pinacolada6936]

Thank you in advance!!❤❤

[@prathamgajjar6125]

This is plain AMAZING

[@cromuelbarut9859]

awesome tutorial

[@ameernajath3613]

Perfect Tutorial 👍

[@rishi2220]

The name suggests what the channel do, REALLY!

[@EasyApproach]

Subscribe the channel :)

[@rishi2220]

Always has been!

[@HassanAli-od8gx]

Great tutorial.

[@berkcan3475]

amazing plugin thank you for sharing it, can you make a video about how to scale everything in landscape device, maybe checking ration and adding white borders to left and right that would be superb and enable many developers to port app to web

[@Mahmoudery]

Insightful.

[@readtogether-podcast]

This is amazing!

[@MyDanish100]

I am new to flutter and looking forward to learn lot from you ❤️. Subscribed ❤️❤️

[@EasyApproach]

Thanks :)

[@thalapathyyugamofficial1970]

Thanks alot bro❤️

[@natheeshkumar]

Great !!! 🤗

[@vishvamurthy8089]

Thank you so much bro. Very helpfull

[@EasyApproach]

Always welcome

[@blueice1364]

Thank you!

[@yunismaruf]

Thank you,

[@khurshidddbek]

Thank you very much.

[@golammaulla7236]

Amazing. Can you make another video responsive UI

[@Socialifly]

Amazing way to explain. What will happen if the screen size is small like 5 inch phone and as the design suggests there is no scrolling will that work or we need to add scroll as well

[@YousifEZZi]

thanks a lot

[@dipaligupta838]

Will it also work if I change the orientation to landscape ?

[@bikerboyankush]

excellent tutorial.. thanks! it would be great if you make a comprehensive video about null safety too..

[@EasyApproach]

Soon

[@abc867]

Thanks for this video🙂

[@EasyApproach]

My pleasure 😊 Subscribe the channel :)

[@darkyassin]

What about landscape? Does it adjust it automatically?

[@sheikhraj7434]

I wanna buy a new mac for building the flutter app as you did, here I wanna know what configuration you recommend for this i low budget.I will be very thankful to you for this.

[@lpfboyka561]

are you using apple M1 processor? just asking since u have good emulator there.. my emulator didn't even have a frame since the processor is new... If yes pls tell me how u can get the emulator ty

[@saifazam5838]

Assalamualaykum brother @EasyApproach I want to ask you if I working on Figma size 360/640, So will I have to choose a specific emulator with a screen size same as Figma ya can I work on any emulator screen(320/590. )

[@ariuntsetsegmunhtulga3732]

Thanks lot

[@ffstrom5100]

this packege work on tablete and i pad apps??

[@Mahmoudery]

I am having a corner case while working with this package. So the problem is that when I call setState method on a stateful widget, the whole layout size just changes, the containers get smaller after rebuilding the tree, anyone knows how to encounter this problem with a proper solution?

[@jaimonga420]

It's not working with device size 1080 x 1920 (Moto G5s Plus), any idea?

[@devaref2461]

I hop another video using media query

[@novysandhu5193]

i'm getting this error "LateInitializationError: Field '_instance@1114075166' has not been initialized." ????????????????????????????????

[@emmanuelolajubu4144]

Does it work for desktop or web??

[@clashwithfaizz9861]

if i rotate my screen it occurs renderflex error on bottom , any remedies for this

[@listenermurindashiri8020]

sir am just new to flutter and eager to know am seing that you are doing a great job.I need help on how TO CREATE A DISEASE DETECTION MOBILE APPLICATION.

[@AiEnthusiast999]

excellent

[@EasyApproach]

Thanks. Please subscribe the channel :)

[@fikkyardianto]

what if the device turn on orientation to landscape?

[@NithinKavali]

Why didn't you change the height of TextField?

[@rezwansaki]

Please, make another tutorial like this.

[@mythoughts121]

Why tablet button text is Signup account instead of Google

[@jorgwei8590]

You sold me the package at 8:17 :)

[@firazyn.]

Hello, I would like to ask something about this. Do I have to reinitialize the ScreenUtil for the B page when I just navigated from the A page? Or, I have to pass the context from the A page? Or, I just have to use .sw and .sh instead of .h and .w? If I have to reinitialize, what is the best way to do it? Thanks in advance!

[@naveennirban]

Wrap MaterialApp by ScreenUtil

[@mhddedekyansyah4720]

How to device on lanscape? What's collapse?

[@daniwaxman6016]

Great video! I am finding that the display is not sized in proportion on iPhone 13 mini. The type is too large for the display. Is there something I am doing wrong that can be causing this?

[@mikewest557]

i hope you specified the .sp for the type? the .sp is the trick. if not, something must done with the spacing around the parent of the text widget

[@1RRaider]

Thank u for this. Assuming you're using stack to place widgets on each other, is there a way to apply this package too?

[@mikewest557]

i doubt . stack has it own rules

[@1RRaider]

Dude I asked that question 2 years ago. I obviously have a better understanding now​@@mikewest557

[@restaurantrecipebyhafsa]

i am getting this error The argument type 'MaterialApp Function()' can't be assigned to the parameter type 'Widget Function(BuildContext, Widget?)'.......why?

[@anisurrehman4274]

same

[@anisurrehman4274]

builder: (BuildContext context, Widget? widget) try this

[@asib9894]

You should share this figma UI project with us. Then we will practice on this project.

[@baluch6925]

It's giving an error after the latest update of flutter

[@nadislat]

Thank you so much! Excellent video. I also tried it on desktop and web but got the widgets pretty big 😂and the overflow error. I think that for desktop and web should be use other approach, or other screen size.

[@szyszak9424]

use LayoutBuilder if u making for web

[@deenadayalan3073]

Amazing. Will it work if I change the orientation to landscape right?

[@EasyApproach]

Well TBH I didn't try. Let me know too when you try. Also subscribe the channel!

[@deenadayalan3073]

@@EasyApproach sure, subscribed

[@ReZxNextra]

What if we were making widgets on different screens? After initializing screenutilinit with the design size on the main dart file. How to make use of it on other dart files?

[@markdioneeb8997]

@@deepakrattan2328 You're completely wrong!!! no need to do that, all widgets inside material app will inherit ScreenUtilInit

[@markdioneeb8997]

All the Widgets inside MaterialApp will inherit screenutilinit , no need to wrap it in all widgets

[@deepakrattan2328]

@@markdioneeb8997 Yes you are right. Agree with you

[@bhakinkhantarjeerawat8163]

May I know which program you used to record the screen? My Windows Laptop is less clear than you.

[@EasyApproach]

It is not just about software. I am using macbook, and it has higher resolutions. But you can still try software OBS for screen recording

[@shamnadchemmu7222]

bro .. don't we need to use screenutil.setcontext(context); in each builder ??

[@EasyApproach]

No

[@tuyenvan382]

Thank you for the video. But I see in figma there is also a LineHeight property of text that you didn't mention in the video

[@pramodvishwakarma08]

Right

[@pramodvishwakarma08]

You find did you find the solution?

[@DeshiTraditionReviewer]

@@pramodvishwakarma08 hey there, the lineheight property of text widget only. it does not matter if you are not use it. It's your choice. thanks.

[@riadhhs4378]

If i'm not using a design can i just put in my testing device size ?

[@baluch6925]

use the recommendation size which is given on the pkg docs which is Size(360, 690), don't use your physical mobile width and height

[@dangdatraymonddelmut3230]

I am getting renderflex error when I want to type something in the input field. Nice video

[@RohanKumar-gm6zj]

I think you can use the resizeToAvoidBottomInset: false, in scaffold to avoid error

[@victoressien8742]

Invariably you can use ListView within the scaffold

[@shakshorsarker3418]

what will be the design ratio if i have not any figma design?

[@mikewest557]

i think this approach is for designs already mocked up in a design software like figma

[@mehmetpeker9047]

What is the size unit? I read documentation but i dont understand. //Set the fit size (Find your UI design, look at the dimensions of the device screen and fill it in,unit in dp) What is dp? Device pixel or density-independent pixels (dp)

[@GAMEOLOGIST]

Just put the dimensions of your phone display

[@szyszak9424]

@@GAMEOLOGIST the emulator right?

[@RKN998]

i love you

[@MoAdel92]

my design broke in landscape mode

[@rezaasgary1442]

Thank you so mutch ,by the way how this package actually calculate size , does anyone know?

[@outcast9229]

if the padding is 25 on screen of width 360 ' that for the original design ' what would the padding be on screen of 600 well it's simply Ratio: (25 / 360) = 6,94% we got the ratio ' 6,94% of the total width ' Then what is the 6,94% of 600 ? => 41,67 the padding 41.67 is also 6,94% of 600 So no matter what screen's dimension are the ration will place things in the correct place regarding to the original design

[@rezaasgary1442]

@@outcast9229 thank you

[@habilkhan1771]

dear sir this is not a responsive Ui because when we rotate your mobile phone the you will got bottom overflow so thats why i said that this is not a responsive UI

[@asifalikhan8851]

Stop rotation of app . It will make life easier.

[@emmanuelolajubu4144]

@@asifalikhan8851 lol, fact

[@ahmedbathily7013]

SingleScrolview in place of column when you use TextField

[@chrise202]

Rotating the screen horizontally, the proportions look quite crappy tbh. Good try though!

[@turbogoose64]

this is great but i couldn't possibly subscribe to a channel that pushes an ad every 60 seconds

[@EasyApproach]

Not forcing you

[@turbogoose64]

@@EasyApproach mate, I'm not having a dig, take this as feedback. If I think this way, so do a thousand others. Reduce your ad frequency and you'll get loads more subscribers (and ultimately more ad revenue) because your content is good.

[@anisurrehman4274]

totally time waste becuos material app not working

[@justiceli5762]

Thanks for your contribution Thanks for your contribution to flutter_screenutil - the author of flutter_screenutil

[@firazyn.]

Hello, I would like to ask something about this. Do I have to reinitialize the ScreenUtil for the B page when I just navigated from the A page? Or, I have to pass the context from the A page? Or, I just have to use .sw and .sh instead of .h and .w? If I have to reinitialize, what is the best way to do it? Thanks in advance!

[@matthiasimegi8211]

No, you don't have to initialize for B page

[@mikewest557]

replying in the year 2024: but if doesn't work, intialise it