Flutter Tutorial - Super Quick Way To Create Pixel Perfect Responsive UI
Вставка
- Опубліковано 20 чер 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 - Наука та технологія
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
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.👍
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.
Great video ❤️ very well explained. Was finding this kind of tutorial for a long time.
Thanks so much for the tutorial...thought my app won't be fixed ...been looking for a better solution ...thanks so much
Thanks a lot! This plugin is exactly what I was looking for!
This is awesome tutorial. Easy and perfect. Thanks for this tutorial
Thank you, I am a rookie battling with render flex errors, I am sure this will save me from that
Such a good explain. You did a really good video mate.Thank you very much!
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
Excellent tutorial. Thank you so much for this content. Really helped me a lot.
it's like your name, easy to understand. thank u so much
I really needed this tutorial. Thanks
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 ?
I am new to flutter and looking forward to learn lot from you ❤️. Subscribed ❤️❤️
Thanks :)
JUST LOVED IT!
Thanks alot ... it was a great help
Nice Tutorial !! Easy to understand !!
It was very helpful, thanks! ❤️
What about landscape? Does it adjust it automatically?
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.
if i rotate my screen it occurs renderflex error on bottom , any remedies for this
It's not working with device size 1080 x 1920 (Moto G5s Plus), any idea?
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?
Perfect Tutorial 👍
Thank you so much you are doing very well 🥰
this packege work on tablete and i pad apps??
Amazing. Can you make another video responsive UI
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
what if the device turn on orientation to landscape?
This is plain AMAZING
i'm getting this error "LateInitializationError: Field '_instance@1114075166' has not been initialized." ????????????????????????????????
Does it work for desktop or web??
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.
awesome tutorial
Thank you in advance!!❤❤
Great tutorial.
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. )
Why tablet button text is Signup account instead of Google
Why didn't you change the height of TextField?
excellent tutorial.. thanks! it would be great if you make a comprehensive video about null safety too..
Soon
How to device on lanscape? What's collapse?
The name suggests what the channel do, REALLY!
Subscribe the channel :)
Always has been!
It's giving an error after the latest update of flutter
This is amazing!
Thank you so much bro. Very helpfull
Always welcome
Insightful.
Great !!! 🤗
Thanks alot bro❤️
Thank you very much.
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
I hop another video using media query
Thank you!
Thank you,
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
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
Thanks for this video🙂
My pleasure 😊 Subscribe the channel :)
You sold me the package at 8:17 :)
bro .. don't we need to use screenutil.setcontext(context); in each builder ??
No
thanks a lot
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
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
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
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
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
Please, make another tutorial like this.
You should share this figma UI project with us. Then we will practice on this project.
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.
Thanks lot
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
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
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
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?
my design broke in landscape mode
excellent
Thanks. Please subscribe the channel :)
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
i love you
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
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.
totally time waste becuos material app not working
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