Flutter Tutorial - Super Quick Way To Create Pixel Perfect Responsive UI
Vložit
- čas přidán 20. 06. 2021
- 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 - Věda a technologie
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.
Wrap column in singlechildscrollview or falsify the property resizeToAvoidBottomInset
Exactly the issue I had and I felt misled ! With the title of this video you should have considered this. Nice video tho
Sorry I missed it.
@@EasyApproach does it work for desktop or web
Use list view no column
Amazing tutorial. Best one I have found with respect to responsive design. Really makes it straightforward. Thank you. Subscribed.
Thanks. Please subscribe the channel :)
Just amazing man. This package and your tutorial are just save me.
Thanks a lot! This plugin is exactly what I was looking for!
Really Great Explanation. Please upload more flutter-related videos. Our support is always there
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 !
Straightforward explaination that is what i like the most, Channel Subscribed.👍
Great video ❤️ very well explained. Was finding this kind of tutorial for a long time.
Such a good explain. You did a really good video mate.Thank you very much!
Excellent tutorial. Thank you so much for this content. Really helped me a lot.
This is awesome tutorial. Easy and perfect. Thanks for this tutorial
Thanks so much for the tutorial...thought my app won't be fixed ...been looking for a better solution ...thanks so much
I really needed this tutorial. Thanks
Thank you, I am a rookie battling with render flex errors, I am sure this will save me from that
JUST LOVED IT!
it's like your name, easy to understand. thank u so much
Thanks alot ... it was a great help
It was very helpful, thanks! ❤️
I am new to flutter and looking forward to learn lot from you ❤️. Subscribed ❤️❤️
Thanks :)
Nice Tutorial !! Easy to understand !!
Perfect Tutorial 👍
This is plain AMAZING
Thank you so much you are doing very well 🥰
Thank you in advance!!❤❤
Great tutorial.
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
awesome tutorial
This is amazing!
The name suggests what the channel do, REALLY!
Subscribe the channel :)
Always has been!
Thank you so much bro. Very helpfull
Always welcome
Great !!! 🤗
excellent tutorial.. thanks! it would be great if you make a comprehensive video about null safety too..
Soon
Amazing. Can you make another video responsive UI
Thanks alot bro❤️
Insightful.
Thank you very much.
Thank you!
Thanks for this video🙂
My pleasure 😊 Subscribe the channel :)
Thank you,
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
Will it also work if I change the orientation to landscape ?
What about landscape? Does it adjust it automatically?
thanks a lot
I hop another video using media query
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.
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.
Thanks lot
You sold me the package at 8:17 :)
excellent
Thanks. Please subscribe the channel :)
i'm getting this error "LateInitializationError: Field '_instance@1114075166' has not been initialized." ????????????????????????????????
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?
It's not working with device size 1080 x 1920 (Moto G5s Plus), any idea?
Please, make another tutorial like this.
if i rotate my screen it occurs renderflex error on bottom , any remedies for this
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!
Wrap MaterialApp by ScreenUtil
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
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. )
Does it work for desktop or web??
what if the device turn on orientation to landscape?
this packege work on tablete and i pad apps??
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?
@@deepakrattan2328 You're completely wrong!!! no need to do that, all widgets inside material app will inherit ScreenUtilInit
All the Widgets inside MaterialApp will inherit screenutilinit , no need to wrap it in all widgets
@@markdioneeb8997 Yes you are right. Agree with you
i am getting this error The argument type 'MaterialApp Function()' can't be assigned to the parameter type 'Widget Function(BuildContext, Widget?)'.......why?
same
builder: (BuildContext context, Widget? widget) try this
Thank u for this. Assuming you're using stack to place widgets on each other, is there a way to apply this package too?
i doubt . stack has it own rules
Dude I asked that question 2 years ago. I obviously have a better understanding now@@mikewest557
Amazing. Will it work if I change the orientation to landscape right?
Well TBH I didn't try. Let me know too when you try.
Also subscribe the channel!
@@EasyApproach sure, subscribed
Why tablet button text is Signup account instead of Google
You should share this figma UI project with us. Then we will practice on this project.
I am getting renderflex error when I want to type something in the input field. Nice video
I think you can use the resizeToAvoidBottomInset: false, in scaffold to avoid error
Invariably you can use ListView within the scaffold
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.
use LayoutBuilder if u making for web
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
Right
You find did you find the solution?
@@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.
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?
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
Why didn't you change the height of TextField?
How to device on lanscape? What's collapse?
It's giving an error after the latest update of flutter
bro .. don't we need to use screenutil.setcontext(context); in each builder ??
No
If i'm not using a design can i just put in my testing device size ?
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
May I know which program you used to record the screen? My Windows Laptop is less clear than you.
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
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)
Just put the dimensions of your phone display
@@GAMEOLOGIST the emulator right?
i love you
what will be the design ratio if i have not any figma design?
i think this approach is for designs already mocked up in a design software like figma
Thank you so mutch ,by the way how this package actually calculate size , does anyone know?
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
@@outcast9229 thank you
my design broke in landscape mode
this is great but i couldn't possibly subscribe to a channel that pushes an ad every 60 seconds
Not forcing you
@@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.
Rotating the screen horizontally, the proportions look quite crappy tbh. Good try though!
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
Stop rotation of app . It will make life easier.
@@asifalikhan8851 lol, fact
SingleScrolview in place of column when you use TextField
totally time waste becuos material app not working
Yikes.. this is not professional way of coding Flutter.
Thanks for your contribution
Thanks for your contribution to flutter_screenutil - the author of flutter_screenutil
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!
No, you don't have to initialize for B page
replying in the year 2024: but if doesn't work, intialise it