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

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

Easy Approach

Easy Approach

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
@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
@EasyApproach 3 жыл бұрын
Wrap column in singlechildscrollview or falsify the property resizeToAvoidBottomInset
@dangdatraymonddelmut3230
@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
@EasyApproach 3 жыл бұрын
Sorry I missed it.
@emmanuelolajubu4144
@emmanuelolajubu4144 2 жыл бұрын
@@EasyApproach does it work for desktop or web
@AbdulMalik-uw1hy
@AbdulMalik-uw1hy 2 жыл бұрын
Use list view no column
@deanjackson3238
@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 !
@bluyetiinc7553
@bluyetiinc7553 3 жыл бұрын
Amazing tutorial. Best one I have found with respect to responsive design. Really makes it straightforward. Thank you. Subscribed.
@EasyApproach
@EasyApproach 3 жыл бұрын
Thanks. Please subscribe the channel :)
@swayamshreemohantyvlogs8126
@swayamshreemohantyvlogs8126 2 жыл бұрын
Just amazing man. This package and your tutorial are just save me.
@divinemaredi4138
@divinemaredi4138 2 жыл бұрын
Thanks a lot! This plugin is exactly what I was looking for!
@usr829
@usr829 Жыл бұрын
Really Great Explanation. Please upload more flutter-related videos. Our support is always there
@hamzakhan-un3yd
@hamzakhan-un3yd Жыл бұрын
Great video ❤️ very well explained. Was finding this kind of tutorial for a long time.
@HassanAli-od8gx
@HassanAli-od8gx Жыл бұрын
Straightforward explaination that is what i like the most, Channel Subscribed.👍
@marctre9004
@marctre9004 6 ай бұрын
Thanks so much for the tutorial...thought my app won't be fixed ...been looking for a better solution ...thanks so much
@samiulislam_live
@samiulislam_live 2 жыл бұрын
Excellent tutorial. Thank you so much for this content. Really helped me a lot.
@mr___rapp
@mr___rapp Жыл бұрын
Thank you, I am a rookie battling with render flex errors, I am sure this will save me from that
@kyrieirving6301
@kyrieirving6301 Жыл бұрын
Such a good explain. You did a really good video mate.Thank you very much!
@berkcan3475
@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
@rezwansaki
@rezwansaki 10 ай бұрын
This is awesome tutorial. Easy and perfect. Thanks for this tutorial
@user-qt2cv7cv2f
@user-qt2cv7cv2f Жыл бұрын
I really needed this tutorial. Thanks
@MyDanish100
@MyDanish100 3 жыл бұрын
I am new to flutter and looking forward to learn lot from you ❤️. Subscribed ❤️❤️
@EasyApproach
@EasyApproach 3 жыл бұрын
Thanks :)
@iamuzairaslam
@iamuzairaslam 2 жыл бұрын
JUST LOVED IT!
@ucminhnguyen7522
@ucminhnguyen7522 2 жыл бұрын
it's like your name, easy to understand. thank u so much
@GAMEOLOGIST
@GAMEOLOGIST 2 жыл бұрын
Nice Tutorial !! Easy to understand !!
@newbee936
@newbee936 6 ай бұрын
Thanks alot ... it was a great help
@prathamgajjar6125
@prathamgajjar6125 Жыл бұрын
This is plain AMAZING
@ameernajath3613
@ameernajath3613 Жыл бұрын
Perfect Tutorial 👍
@iliyamirzaei1860
@iliyamirzaei1860 2 жыл бұрын
It was very helpful, thanks! ❤️
@pinacolada6936
@pinacolada6936 6 ай бұрын
Thank you in advance!!❤❤
@HassanAli-od8gx
@HassanAli-od8gx Жыл бұрын
Great tutorial.
@cromuelbarut9859
@cromuelbarut9859 3 ай бұрын
awesome tutorial
@hassantariq6645
@hassantariq6645 2 жыл бұрын
Thank you so much you are doing very well 🥰
@readtogether-podcast
@readtogether-podcast Жыл бұрын
This is amazing!
@Socialifly
@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
@bikerboyankush
@bikerboyankush 2 жыл бұрын
excellent tutorial.. thanks! it would be great if you make a comprehensive video about null safety too..
@EasyApproach
@EasyApproach 2 жыл бұрын
Soon
@rishi2220
@rishi2220 3 жыл бұрын
The name suggests what the channel do, REALLY!
@EasyApproach
@EasyApproach 3 жыл бұрын
Subscribe the channel :)
@rishi2220
@rishi2220 3 жыл бұрын
Always has been!
@golammaulla7236
@golammaulla7236 2 жыл бұрын
Amazing. Can you make another video responsive UI
@natheeshkumar
@natheeshkumar 2 жыл бұрын
Great !!! 🤗
@Mahmoudery
@Mahmoudery 5 ай бұрын
Insightful.
@thalapathyyugamofficial1970
@thalapathyyugamofficial1970 2 жыл бұрын
Thanks alot bro❤️
@vishvamurthy8089
@vishvamurthy8089 3 жыл бұрын
Thank you so much bro. Very helpfull
@EasyApproach
@EasyApproach 3 жыл бұрын
Always welcome
@listenermurindashiri8020
@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.
@dipaligupta838
@dipaligupta838 3 жыл бұрын
Will it also work if I change the orientation to landscape ?
@khurshidddbek
@khurshidddbek 2 жыл бұрын
Thank you very much.
@sheikhraj7434
@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.
@blueice1364
@blueice1364 3 жыл бұрын
Thank you!
@abc867
@abc867 3 жыл бұрын
Thanks for this video🙂
@EasyApproach
@EasyApproach 3 жыл бұрын
My pleasure 😊 Subscribe the channel :)
@darkyassin
@darkyassin 2 жыл бұрын
What about landscape? Does it adjust it automatically?
@yunismaruf
@yunismaruf Жыл бұрын
Thank you,
@devaref2461
@devaref2461 2 жыл бұрын
I hop another video using media query
@YousifEZZi
@YousifEZZi 11 ай бұрын
thanks a lot
@jorgwei8590
@jorgwei8590 2 жыл бұрын
You sold me the package at 8:17 :)
@emmanuelolajubu4144
@emmanuelolajubu4144 2 жыл бұрын
Does it work for desktop or web??
@rezwansaki
@rezwansaki 10 ай бұрын
Please, make another tutorial like this.
@nadislat
@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
@szyszak9424 11 ай бұрын
use LayoutBuilder if u making for web
@lpfboyka561
@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
@ffstrom5100
@ffstrom5100 Ай бұрын
this packege work on tablete and i pad apps??
@ariuntsetsegmunhtulga3732
@ariuntsetsegmunhtulga3732 2 жыл бұрын
Thanks lot
@AiEnthusiast999
@AiEnthusiast999 3 жыл бұрын
excellent
@EasyApproach
@EasyApproach 3 жыл бұрын
Thanks. Please subscribe the channel :)
@firazyn.
@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
@naveennirban 6 ай бұрын
Wrap MaterialApp by ScreenUtil
@1RRaider
@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
@mikewest557 6 ай бұрын
i doubt . stack has it own rules
@1RRaider
@1RRaider 6 ай бұрын
Dude I asked that question 2 years ago. I obviously have a better understanding now​@@mikewest557
@novysandhu5193
@novysandhu5193 3 жыл бұрын
i'm getting this error "LateInitializationError: Field '_instance@1114075166' has not been initialized." ????????????????????????????????
@clashwithfaizz9861
@clashwithfaizz9861 2 жыл бұрын
if i rotate my screen it occurs renderflex error on bottom , any remedies for this
@tuyenvan382
@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
@pramodvishwakarma08 Жыл бұрын
Right
@pramodvishwakarma08
@pramodvishwakarma08 Жыл бұрын
You find did you find the solution?
@DeshiTraditionReviewer
@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.
@saifazam5838
@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. )
@deenadayalan3073
@deenadayalan3073 3 жыл бұрын
Amazing. Will it work if I change the orientation to landscape right?
@EasyApproach
@EasyApproach 3 жыл бұрын
Well TBH I didn't try. Let me know too when you try. Also subscribe the channel!
@deenadayalan3073
@deenadayalan3073 3 жыл бұрын
@@EasyApproach sure, subscribed
@fikkyardianto
@fikkyardianto 10 ай бұрын
what if the device turn on orientation to landscape?
@jaimonga420
@jaimonga420 Жыл бұрын
It's not working with device size 1080 x 1920 (Moto G5s Plus), any idea?
@NithinKavali
@NithinKavali 2 жыл бұрын
Why didn't you change the height of TextField?
@dangdatraymonddelmut3230
@dangdatraymonddelmut3230 3 жыл бұрын
I am getting renderflex error when I want to type something in the input field. Nice video
@RohanKumar-gm6zj
@RohanKumar-gm6zj 3 жыл бұрын
I think you can use the resizeToAvoidBottomInset: false, in scaffold to avoid error
@victoressien8742
@victoressien8742 Жыл бұрын
Invariably you can use ListView within the scaffold
@Mahmoudery
@Mahmoudery 4 ай бұрын
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?
@ReZxNextra
@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
@markdioneeb8997 2 жыл бұрын
@@deepakrattan2328 You're completely wrong!!! no need to do that, all widgets inside material app will inherit ScreenUtilInit
@markdioneeb8997
@markdioneeb8997 2 жыл бұрын
All the Widgets inside MaterialApp will inherit screenutilinit , no need to wrap it in all widgets
@deepakrattan2328
@deepakrattan2328 2 жыл бұрын
@@markdioneeb8997 Yes you are right. Agree with you
@daniwaxman6016
@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
@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
@mythoughts121
@mythoughts121 2 жыл бұрын
Why tablet button text is Signup account instead of Google
@mhddedekyansyah4720
@mhddedekyansyah4720 2 жыл бұрын
How to device on lanscape? What's collapse?
@shamnadchemmu7222
@shamnadchemmu7222 2 жыл бұрын
bro .. don't we need to use screenutil.setcontext(context); in each builder ??
@EasyApproach
@EasyApproach 2 жыл бұрын
No
@asib9894
@asib9894 3 ай бұрын
You should share this figma UI project with us. Then we will practice on this project.
@riadhhs4378
@riadhhs4378 2 жыл бұрын
If i'm not using a design can i just put in my testing device size ?
@baluch6925
@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
@baluch6925
@baluch6925 2 жыл бұрын
It's giving an error after the latest update of flutter
@bhakinkhantarjeerawat8163
@bhakinkhantarjeerawat8163 2 жыл бұрын
May I know which program you used to record the screen? My Windows Laptop is less clear than you.
@EasyApproach
@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
@restaurantrecipebyhafsa
@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
@anisurrehman4274 4 ай бұрын
same
@anisurrehman4274
@anisurrehman4274 4 ай бұрын
builder: (BuildContext context, Widget? widget) try this
@shakshorsarker3418
@shakshorsarker3418 9 ай бұрын
what will be the design ratio if i have not any figma design?
@mikewest557
@mikewest557 6 ай бұрын
i think this approach is for designs already mocked up in a design software like figma
@mehmetpeker9047
@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
@GAMEOLOGIST 2 жыл бұрын
Just put the dimensions of your phone display
@szyszak9424
@szyszak9424 11 ай бұрын
@@GAMEOLOGIST the emulator right?
@RKN998
@RKN998 2 жыл бұрын
i love you
@rezaasgary1442
@rezaasgary1442 3 жыл бұрын
Thank you so mutch ,by the way how this package actually calculate size , does anyone know?
@outcast9229
@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
@rezaasgary1442 3 жыл бұрын
@@outcast9229 thank you
@MoAdel92
@MoAdel92 Жыл бұрын
my design broke in landscape mode
@chrise202
@chrise202 2 жыл бұрын
Rotating the screen horizontally, the proportions look quite crappy tbh. Good try though!
@turbogoose64
@turbogoose64 2 жыл бұрын
this is great but i couldn't possibly subscribe to a channel that pushes an ad every 60 seconds
@EasyApproach
@EasyApproach 2 жыл бұрын
Not forcing you
@turbogoose64
@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
@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
@asifalikhan8851 2 жыл бұрын
Stop rotation of app . It will make life easier.
@emmanuelolajubu4144
@emmanuelolajubu4144 2 жыл бұрын
@@asifalikhan8851 lol, fact
@ahmedbathily7013
@ahmedbathily7013 2 жыл бұрын
SingleScrolview in place of column when you use TextField
@anisurrehman4274
@anisurrehman4274 3 ай бұрын
totally time waste becuos material app not working
@Akua-hx3rb
@Akua-hx3rb 8 күн бұрын
Yikes.. this is not professional way of coding Flutter.
@justiceli5762
@justiceli5762 Жыл бұрын
Thanks for your contribution Thanks for your contribution to flutter_screenutil - the author of flutter_screenutil
@firazyn.
@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!
@matthiasimegi8211
@matthiasimegi8211 Жыл бұрын
No, you don't have to initialize for B page
@mikewest557
@mikewest557 6 ай бұрын
replying in the year 2024: but if doesn't work, intialise it
Top 10 Flutter Widgets (for Responsive Layouts)
13:17
HeyFlutter․com
Рет қаралды 71 М.
How to Make Responsive Flutter Apps, Pixel Perfect
14:58
Learn App Code
Рет қаралды 45 М.
IQ Level: 10000
00:10
Younes Zarou
Рет қаралды 10 МЛН
Best KFC Homemade For My Son #cooking #shorts
00:58
BANKII
Рет қаралды 69 МЛН
Sigma girl and soap bubbles by Secret Vlog
00:37
Secret Vlog
Рет қаралды 14 МЛН
Best 30 Flutter Widgets, Packages & Tips
5:11
Flutter Mapp
Рет қаралды 119 М.
Adaptive vs. Responsive | Decoding Flutter
5:09
Flutter
Рет қаралды 103 М.
Flutter Responsive UI | Learning Platform App - Part 1
44:44
TECHIE BLOSSOM
Рет қаралды 71 М.
🖥📱RESPONSIVE DESIGN • Flutter Tutorial
8:03
Mitch Koko
Рет қаралды 276 М.
Are You Making These CSS Height Mistakes?
8:54
Web Dev Simplified
Рет қаралды 125 М.
Most overpowered way to build mobile apps?
8:33
Beyond Fireship
Рет қаралды 752 М.
Create Responsive Flutter Apps with Minimal Effort
43:10
Reso Coder
Рет қаралды 73 М.
Flavors in Flutter - Multiple apps from one source code - Icon Generation
28:42
Flutter Tutorial - Responsive UI Text Layout - Auto Size Text
14:26
HeyFlutter․com
Рет қаралды 32 М.
НОВЫЕ ФЕЙК iPHONE 🤯 #iphone
0:37
ALSER kz
Рет қаралды 357 М.
low battery 🪫
0:10
dednahype
Рет қаралды 1,6 МЛН
Look, this is the 97th generation of the phone?
0:13
Edcers
Рет қаралды 7 МЛН
Какой ноутбук взять для учёбы? #msi #rtx4090 #laptop #юмор #игровой #apple #shorts
0:18
Как бесплатно замутить iphone 15 pro max
0:59
ЖЕЛЕЗНЫЙ КОРОЛЬ
Рет қаралды 8 МЛН