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

Рет қаралды 89,543

3 жыл бұрын

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 : easyaproach555@gmail.com

Пікірлер: 138

@MohsinKhan-lu6kc 3 жыл бұрын

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 3 жыл бұрын

Wrap column in singlechildscrollview or falsify the property resizeToAvoidBottomInset

@dangdatraymonddelmut3230 3 жыл бұрын

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

@EasyApproach 3 жыл бұрын

Sorry I missed it.

@emmanuelolajubu4144 2 жыл бұрын

@@EasyApproach does it work for desktop or web

@AbdulMalik-uw1hy 2 жыл бұрын

Use list view no column

@bluyetiinc7553 3 жыл бұрын

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

@EasyApproach 3 жыл бұрын

Thanks. Please subscribe the channel :)

@usr829 Жыл бұрын

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

@swayamshreemohantyvlogs8126 2 жыл бұрын

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

@hamzakhan-un3yd Жыл бұрын

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

@HassanAli-od8gx Жыл бұрын

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

@deanjackson3238 2 жыл бұрын

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 !

@divinemaredi4138 2 жыл бұрын

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

@kyrieirving6301 Жыл бұрын

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

@samiulislam_live 2 жыл бұрын

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

@rezwansaki 10 ай бұрын

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

@marctre9004 6 ай бұрын

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

@user-qt2cv7cv2f Жыл бұрын

I really needed this tutorial. Thanks

@GAMEOLOGIST 2 жыл бұрын

Nice Tutorial !! Easy to understand !!

@berkcan3475 2 жыл бұрын

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

@mr___rapp Жыл бұрын

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

@ucminhnguyen7522 2 жыл бұрын

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

@iliyamirzaei1860 2 жыл бұрын

It was very helpful, thanks! ❤️

@MyDanish100 3 жыл бұрын

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

@EasyApproach 3 жыл бұрын

Thanks :)

@iamuzairaslam 2 жыл бұрын

JUST LOVED IT!

@newbee936 6 ай бұрын

Thanks alot ... it was a great help

@hassantariq6645 2 жыл бұрын

Thank you so much you are doing very well 🥰

@ameernajath3613 Жыл бұрын

Perfect Tutorial 👍

@prathamgajjar6125 Жыл бұрын

This is plain AMAZING

@readtogether-podcast Жыл бұрын

This is amazing!

@natheeshkumar 2 жыл бұрын

Great !!! 🤗

@HassanAli-od8gx Жыл бұрын

Great tutorial.

@thalapathyyugamofficial1970 2 жыл бұрын

Thanks alot bro❤️

@cromuelbarut9859 3 ай бұрын

awesome tutorial

@golammaulla7236 2 жыл бұрын

Amazing. Can you make another video responsive UI

@pinacolada6936 6 ай бұрын

Thank you in advance!!❤❤

@rishi2220 3 жыл бұрын

The name suggests what the channel do, REALLY!

@EasyApproach 3 жыл бұрын

Subscribe the channel :)

@rishi2220 3 жыл бұрын

Always has been!

@Mahmoudery 5 ай бұрын

Insightful.

@bikerboyankush 2 жыл бұрын

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

@EasyApproach 2 жыл бұрын

Soon

@khurshidddbek 2 жыл бұрын

Thank you very much.

@vishvamurthy8089 3 жыл бұрын

Thank you so much bro. Very helpfull

@EasyApproach 3 жыл бұрын

Always welcome

@blueice1364 3 жыл бұрын

Thank you!

@dipaligupta838 3 жыл бұрын

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

@darkyassin 2 жыл бұрын

What about landscape? Does it adjust it automatically?

@Socialifly 9 ай бұрын

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

@devaref2461 2 жыл бұрын

I hop another video using media query

@listenermurindashiri8020 2 жыл бұрын

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.

@abc867 3 жыл бұрын

Thanks for this video🙂

@EasyApproach 3 жыл бұрын

My pleasure 😊 Subscribe the channel :)

@sheikhraj7434 2 жыл бұрын

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.

@clashwithfaizz9861 2 жыл бұрын

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

@novysandhu5193 3 жыл бұрын

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

@yunismaruf Жыл бұрын

Thank you,

@jorgwei8590 2 жыл бұрын

You sold me the package at 8:17 :)

@jaimonga420 Жыл бұрын

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

@Mahmoudery 3 ай бұрын

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?

@ffstrom5100 Ай бұрын

this packege work on tablete and i pad apps??

@fikkyardianto 10 ай бұрын

what if the device turn on orientation to landscape?

@rezwansaki 10 ай бұрын

Please, make another tutorial like this.

@YousifEZZi 11 ай бұрын

thanks a lot

@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. )

@restaurantrecipebyhafsa 11 ай бұрын

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

@anisurrehman4274 3 ай бұрын

same

@anisurrehman4274 3 ай бұрын

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

@lpfboyka561 2 жыл бұрын

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

@emmanuelolajubu4144 2 жыл бұрын

Does it work for desktop or web??

@asib9894 3 ай бұрын

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

@mythoughts121 2 жыл бұрын

Why tablet button text is Signup account instead of Google

@ariuntsetsegmunhtulga3732 2 жыл бұрын

Thanks lot

@AiEnthusiast999 3 жыл бұрын

excellent

@EasyApproach 3 жыл бұрын

Thanks. Please subscribe the channel :)

@firazyn. 2 жыл бұрын

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 6 ай бұрын

Wrap MaterialApp by ScreenUtil

@mhddedekyansyah4720 2 жыл бұрын

How to device on lanscape? What's collapse?

@NithinKavali 2 жыл бұрын

Why didn't you change the height of TextField?

@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 11 ай бұрын

use LayoutBuilder if u making for web

@daniwaxman6016 9 ай бұрын

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 6 ай бұрын

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

@ReZxNextra 2 жыл бұрын

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 2 жыл бұрын

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

@markdioneeb8997 2 жыл бұрын

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

@deepakrattan2328 2 жыл бұрын

@@markdioneeb8997 Yes you are right. Agree with you

@baluch6925 2 жыл бұрын

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

@1RRaider 2 жыл бұрын

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 6 ай бұрын

i doubt . stack has it own rules

@1RRaider 6 ай бұрын

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

@tuyenvan382 2 жыл бұрын

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.

@shamnadchemmu7222 2 жыл бұрын

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

@EasyApproach 2 жыл бұрын

@dangdatraymonddelmut3230 3 жыл бұрын

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

@RohanKumar-gm6zj 3 жыл бұрын

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

@victoressien8742 Жыл бұрын

Invariably you can use ListView within the scaffold

@riadhhs4378 2 жыл бұрын

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

@bhakinkhantarjeerawat8163 2 жыл бұрын

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

@EasyApproach 2 жыл бұрын

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

@deenadayalan3073 3 жыл бұрын

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

@EasyApproach 3 жыл бұрын

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

@deenadayalan3073 3 жыл бұрын

@@EasyApproach sure, subscribed

@mehmetpeker9047 3 жыл бұрын

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 2 жыл бұрын

Just put the dimensions of your phone display

@szyszak9424 11 ай бұрын

@@GAMEOLOGIST the emulator right?

@RKN998 2 жыл бұрын

i love you

@shakshorsarker3418 8 ай бұрын

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

@mikewest557 6 ай бұрын

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

@rezaasgary1442 3 жыл бұрын

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

@outcast9229 3 жыл бұрын

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 3 жыл бұрын

@@outcast9229 thank you

@MoAdel92 Жыл бұрын

my design broke in landscape mode

@chrise202 2 жыл бұрын

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

@turbogoose64 2 жыл бұрын

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

@EasyApproach 2 жыл бұрын

Not forcing you

@turbogoose64 2 жыл бұрын

@@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.

@habilkhan1771 2 жыл бұрын

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 2 жыл бұрын

Stop rotation of app . It will make life easier.

@emmanuelolajubu4144 2 жыл бұрын

@@asifalikhan8851 lol, fact

@ahmedbathily7013 2 жыл бұрын

SingleScrolview in place of column when you use TextField