Flutter Responsive UI | Learning Platform App - Part 1

#Flutter #Responsive #CrossPlatform
This video mainly focuses on making the simplest layout working on multiple devices, portrait, and landscape orientation. And, you will learn tips and tricks to create consistent and responsive Flutter UI.
If you liked the video, then please show me by hitting the like button for video and show some love by giving star 🌟 on Github.
Code - github.com/TechieBlossom/lear...
Medium Post - “Flutter Responsive UI for Learning Platform App” by Prateek Sharma / okfr2lq5l0
━ ━ ━ ━ ━ ━ ━ ━ ━ ━━ ━ ━ ━ ━ ━ ━ ━ ━ ━
Other Videos
━ ━ ━ ━ ━ ━ ━ ━ ━ ━━ ━ ━ ━ ━ ━ ━ ━ ━ ━
➨ Neumorphism, Gradient Chart & Custom Shape End Drawer - • Sidebar Animation & Na...
➨ Google Stadia App Concept - • Flutter UI | Stadia Ap...
➨ Local Events App - • Flutter UI | Local Eve...
➨ Sidebar animation and navigation - • Sidebar Animation & Na...
➨ Despicable Me Characters App - • Flutter UI | Despicabl...
➨ Flight Ticket App Playlist - • Flight List UI | BLOC ...
➨ Video Game Messaging App - • Video Game Message App...
➨ Bloc Tutorials - • State Management | Fou...
━ ━ ━ ━ ━ ━ ━ ━ ━ ━━ ━ ━ ━ ━ ━ ━ ━ ━ ━
Support!!
━ ━ ━ ━ ━ ━ ━ ━ ━ ━━ ━ ━ ━ ━ ━ ━ ━ ━ ━
Helps me in carving out more time for tutorials
❤️ From India and don't want to pay commission - There are many ways you can connect with me (Website, Twitter, Comments)
❤️ Buy me a Coffee www.buymeacoffee.com/AGd0Xngci
or here is my
❤️ PayPal account paypal.me/techieblossom
━ ━ ━ ━ ━ ━ ━ ━ ━ ━━ ━ ━ ━ ━ ━ ━ ━ ━ ━
Follow me! Show your support towards the channel:
━ ━ ━ ━ ━ ━ ━ ━ ━ ━━ ━ ━ ━ ━ ━ ━ ━ ━ ━
🎯 Medium - / prateeksharma
🎯 Twitter - / sharmaprateek7
🎯 Website - www.techieblossom.com
🎯 Github - github.com/TechieBlossom
SUBSCRIBE FOR MORE VIDEOS LIKE THIS
LIKE & SHARE
THANKS FOR WATCHING!🙏🙏🙏

[@mianumar8013]

oohh man..bravo..love you for such a hard work for those who saw this video after 10 20 30 years..again thanks

[@darpanmadlani4458]

Very well explained, I think this is the best video for learning about responsive in flutter

[@leonardoventocilla3275]

Great bro. Thanks for sharing. Please continue..

[@muhammadnabeel7273]

Excellent bro, I love the way you describe everything's, Great work

[@nikhilkukreja8498]

Awesome Prateek sir God bless you always :)

[@subhajitkar3250]

Wow, you are the savior. This will help me a lot.

[@vinothvino1275]

Thank you for the tutorial! Keep up the good work.

[@AiEnthusiast999]

Good work, thank's for sharing.

[@g-tensolution8527]

Thank you for this beautiful efforts :)

[@hieudinh639]

awsome ! i love this video! thank you alot.

[@kritikaputtewar2599]

Thank you for awesome tutorial..

[@MsSplashIt]

Thanks. Been waiting for this

[@chetannager9246]

This tutorial is Very Helpful. Please make more tutorials for responsive design.

[@RAHULRAJ-iw1bw]

Thanks bro.. Really helpful...LOVE From INDIA

[@wtfwhattheflutter6308]

Perfect tutorial

[@hammadpervez4568]

I love your tutorials. Can you make a video on Performance ? Like how to maintain our app ? or How to structure an app? and What are the best-practices for Flutter Development ?

[@kartzhai]

U R AMAZING!!!! thank s alot. i was wondering how to maintenance the font size. and you make it very easy! thank you keep it bro.

[@techieblossom]

You're welcome 😊

[@erwinmoreno23]

Great work

[@gregoireyakeu32]

you are the best, it help me very good

[@ricard458]

Great!

[@jeandavynizigama5277]

Good introduction to responsive design

[@techieblossom]

Glad you think so!

[@akosidonlindon]

really good one.

[@MadanNeelapu]

Very informative tutorial. Thanks for all the efforts you put in. It is very useful. One suggestion, It seems like you are getting confused when explaining. So I would suggest you to organise the contents(you want to discuss) in a specific order before actually starting to record the video. Thanks again. Keep posting such informative videos.

[@techieblossom]

Thank you for valuable inputs

[@miller00900]

To be honest, this made the tutorial more realistic.. Like I could really connect to it. But that's just my personal opinion.. peace..

[@subhajitkar3250]

@@miller00900 yep, you are right. We can also see there what kind of issues or minor mistakes can be arised. So, we can know what we shouldn't do besides what should.

[@dreamWorldTraveler]

Thanks bro👍

[@rakshithg7337]

Bro please make a video on complete login and sign up through nodejs API. If required I'll provide you the API I have built. We are learning a lot from these video you upload. Thank you 😊❤️

[@techieblossom]

Give me API on email.

[@rakshithg7337]

@@techieblossom where do I find the email?

[@rodrigogomez3988]

Amazing, thx

[@nirmalasudhir1457]

Hi Techie Blossom. Many thanks for the great video. Its really nice and informative. I want to know to how to add text form field which better suits all the real devices. Is it possible for you to add a code snippet for login for the UI you explain in the video. Waiting for you reply. Thank you

[@gilmcglory3748]

I had been wondering how to handle this problem. Your tutorial has helped a lot. I've viewed it once and will certainly view it again to thoroughly understand all of this very important and useful content. Thanks so much!!!

[@techieblossom]

Thanks. glad to hear that.

[@devsadeq]

Many thanks 🥰

[@techieblossom]

You’re welcome 😊

[@onuryldrm1840]

Thanks for the informative video, but why do we equalize the width height when horizontal? I did an experiment, I gave with and heigth max for full screen, it explodes when I do it horizontally.

[@longphan2721]

The method 'toDouble' was called on null. Receiver: null Tried calling: toDouble() When i use your SizeConfig, some times i got this, idk why ?

[@seozfe]

void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return LayoutBuilder( builder: (context, constraints) { return OrientationBuilder( builder: (context, orientation) { SizeConfig().init(constraints, orientation); return MaterialApp( title: 'Learning Platform Application', theme: AppTheme.lightTheme, home: WelcomeScreen(), ); }, ); }, ); } }

[@OzzyOzmenCelik]

Hi firstly i want to say thank you and i see you've experienced about how to resolution apps in flutter but i think u should record this video again because there is only one problem in this video that you couldnt tell it enough especially couldnt explain. Im sure you good and also i see you know what you do but not enough for the video tutorial. If you really want to help so pls be more clear and use simple language. For example: you said " this one but not now". you should say " i used this method in this file and i'll show you then. ". Also pls use short sentences, less word and clear sound ( not o, au,ao etc.. ))when you trying to explain somethings to people. Btw thanks mate.

[@rajansingla5516]

I think in your sizeconfig dart file there are two unused variables that you have used I.e isMobilePortrait and isPortrait. I think you have used these two variables just for the understanding purpose right ?? Apart from this, You are such a blessing for flutter beginners. Thanks a lot. I have been seriously following you for the last 1 month, took help from your techieBlossom website and you have given me a wonderful solution for my problem as well. It's really fun and interesting to work on flutter under your this incredible guidence and tutorials !! Thanks a lot. Keep doing the good work as much as you can !! 😊😊

[@techieblossom]

Thanks a lot. Yes, I have written that for understanding purpose.

[@rajansingla5516]

@@techieblossom Hi again from your old student, My flutter journey starts from your tutorials so I again want some help you regarding this SizeConfig() class. This class works totally fine at my end. But the problem area is ,,,,, I have called this class the way you have called in the main.dart. after calling this class I have used the Multiprovider widget. So when I run the app it gives me the log that are wriitten in the SizeConfig() class. But when I use this class like SizeConfig.heightMultiplier in my home window, then the value I recieved as null. Is this the problem with Multiprovider or I have to use something else to make it work? Please help me in this I have already googling it already. 🙏

[@techieblossom]

First of all thanks for such mention. We have moved from Sizeconfig to Screenutil in recent past. Please see the 5th part of MovieApp to get some understanding. It is same as Sizeconfig. And both should be initialized before using MaterialApp. I hope you are initializing SizeConfig before MaterialApp.

[@rajansingla5516]

@@techieblossom oh! That's great! I will then watch the whole series! Thanks for your always instant replies and support! Blessed! ❤️

[@theplaymakerno1]

I strongly believe that the designers should actually keep Flutter design patterns and widget in mind when giving developers the design.

[@SullyS255]

Thank you for the amazing explanation, i have a line and i want it to stretch based on the screen size with a space in the beginning and the end of the line, how can i do it

[@techieblossom]

Padding widget. Can you post image?

[@lideraliment8536]

Revisa estas tres lineas: styling.dart: static final TextStyle _searchDark = _searchDark.copyWith(color: Colors.black); static final TextStyle _selectedTabDark = _selectedTabDark.copyWith(color: Colors.white); static final TextStyle _unSelectedTabDark = _selectedTabDark.copyWith(color: Colors.white70); Correct: static final TextStyle _searchDark = _searchLight.copyWith(color: Colors.black); static final TextStyle _selectedTabDark = _selectedTabLight.copyWith(color: Colors.white); static final TextStyle _unSelectedTabDark = _selectedTabLight.copyWith(color: Colors.white70); Greetings from Spain.

[@charith2967]

Thanks for the video. I used ur style.dart in my project but when i call like Text( Strings.welcomeScreenTitle, style: AppTheme.lightTheme.textTheme.title, ), the text does not take the values in defined style.dart. May I know where I got wrong?

[@anjannarla7846]

can you make a tutorial on how to run multiple devices on a single flutter project like above it would be very useful

[@techieblossom]

Thanks but honestly, That doesn't need any tutorial I think. Open multiple emulators and simulators. And run the app one by one. To reload, select a device and hit reload. Do this for multiple devices. Only for this much info, cannot create a video.

[@doug4328]

Hi thanks for the video. Quick question > How do you run on all devices in Android Studio/ IntelliJ without flutter run -d all

[@techieblossom]

When you are in run Tab, you can see multiple sub tabs, click on each tab and do hot restart or hot reload.

[@channeling294]

Hello, can you explain more about this Images._(), Strings._() and AppTheme._() inside of your class. It does not look familiar to me what does it do? should I use it the way you use it here and when should I know I'm going to use it? Thanks, bro awesome tutorial

[@techieblossom]

This enforces to not allow initialises of these classes. Try calling Images(), compiler will give error.

[@Mahi-hn8tr]

please tell me your system configuration and model. by the way nice video. Keep creating more. thanks.

[@techieblossom]

Macbook pro 2018 model 16 GB ram

[@xhidnoda]

thanks for the video! can you share the project on Github?

[@techieblossom]

Code - github.com/TechieBlossom/learning_platform_app

[@hardikbhagat51]

i am still not able to make text responsive inspite of using the sizeconfig file concept . when i run on different phone text appears too large. can u please help??

[@niyazitoros9190]

Sorry for my English, but is it possible to share the project on Github? I like to download and study to understand better, Kind Regards

[@techieblossom]

Code - github.com/TechieBlossom/learning_platform_app

[@user-gq9fd7gq1f]

In Flutter documentation are written two ways for building responsive UI 1) Use the LayoutBuilder class and 2) Use the MediaQuery.of() method in your build functions. Did you use some other way?

[@techieblossom]

Used them both. You can also check out the article related to this. “Flutter Responsive UI for Learning Platform App” by Prateek Sharma link.medium.com/oKFR2lq5L0

[@topdeveloper8955]

Great job Techie Blossom, @Татев А instead of questioning and criticizing, why don't you create a video using Flutter documentation as you said, since you know the 2 ways of building responsive UI. Stop talking and start doing.

[@techieblossom]

No problem @top developer. We all are learning..

[@karthikp9453]

Will this re-scale if we change orientation in mid pages? Just wondering because we are getting orientation from Material App.

[@techieblossom]

Then you can use Orientation builder over MaterialApp and initialize configuration when Orientation changes.

[@hammadpervez4568]

I couldn't understand _blockhorizontal/_blockvertical and _textMultipler. Can you please explain a bit more?

[@techwithdenis]

Nice tutorial, but i do not understand the fontSize values, when you needed to change the fontSize from 28 to 3.5 * textMultiplier how did you know the value to use (how did you get the 3.5)

[@techieblossom]

Hit and try. Pick a device where you feel 28 font size is good and for that find the factor that can be multiplied by size multiplier.

[@techwithdenis]

@@techieblossom Alright bro... Thank you very much for the clarification, i really appreciate.

[@alexanderkubi9017]

what's the intro soundtrack link?

[@saimaheshsiva.p9187]

Why don't you take a const page and replace all in one file to reduce the page count sir.

[@Tommy-wu8uv]

when i use the SizeConfig.heightMultiplier or witdh, I always get the error: The method '_mulFromInteger' was called on null. I/flutter (17054): Receiver: null I/flutter (17054): Tried calling: _mulFromInteger(2) can u help me with that?

[@techieblossom]

Give the Code link

[@smallikarjunareddy2783]

great tutorial... But is there any difference if i use flutter_screenutil package...instead of calculating these type of values every time...?

[@techieblossom]

You can prefer using screenutil, it is also good.

[@smallikarjunareddy2783]

@@techieblossom Thanks, but am not getting responsiveness if i use screen util. can you make a video on screen util how to get responsive UI.

[@yogeshparwani3236]

@@techieblossom I faced the same issue with screen_utils, can you make a tutorial on the same? Would be helpful!

[@techieblossom]

Sure.

[@rashidkhan1845]

what about Screen Util package ??

[@uygurdev]

hello, can we apply size_config.dart file on all projects? Is there anything to add?

[@techieblossom]

You can.

[@niyazitoros9190]

the project shows only 'Scaling text' in GitHub. Is it possible to add rest of the file to project as shown in this video? Thanks

[@techieblossom]

I think you got a wrong github link. I have not uploaded the code to github, not a single file. Because, I thought it was very small of code to put. After next video, I will put the code. Video is more of using the concept of scaling.

[@niyazitoros9190]

@@techieblossom sorry, my mistake...

[@mausamrayamajhi5691]

why _boxSizeHorizontal and _boxSizeVertical value always same in portrate and landscape? can you print that value and check?

[@elhamrababah7666]

same to me. did you find the issue?

[@sourabh6894]

why you use Strings._(); default constructor, without this we can also get the values? please Ans if someone knows

[@techieblossom]

This way, you cannot create instance of Strings class.

[@nativeworld0]

} else { _screenWidth = constraints.maxHeight; _screenHeight = constraints.maxWidth; this swapping create same height and width value in both potrait and landscape mode then how is it different from directly using const value?? lets say font-size:14 how its diffr from Size.config*height(7)*2 ?? didn't got logic

[@sainadhpanda8144]

hi bro i need some help for my application

[@queenofrandomness9391]

omg! I almost got a heart attack when I saw 4 emulators running XD what are your computer specs ?

[@techieblossom]

I closed everything but emulators. It's mac 16 Gb 2018 model.

[@queenofrandomness9391]

@@techieblossom wow thats still great, I have lenovo ideapad laptop with 8gb ram and intel i7 and amd radeon and I cant run my Flutter codes on a single Android emulator however in java i can otherwise it lags my laptop and makes it "not responding"

[@blisteredoutlaw1993]

Hi. may i know what mac you are using ? is it a macbook air? pro ? or a mac mini ? and what is the exact specs?

[@techieblossom]

Pro. 16 GB, 256 SSD, TOUCH BAR

[@sanchitverma9122]

what are your pc specs u r using 4 emulators as well as using Android Studio on the other hand screen recording is going. Processor-: ? Ram: ? GPU : ?

[@techieblossom]

MacBook Pro 16 GB RAM. 2018 model.

[@naufilahmed6281]

hello sir i want to ask that the sizes that you have used to make screen responsive . So can we use it in our project also . I mean the same size number that you have used it will not create any problem

[@techieblossom]

Use screenutil instead of this. You can check 5th part of movie app. That u can use with little modification, I have mentioned there

[@naufilahmed6281]

@@techieblossom yes sir we can use screenutil . I have used it but i have heard we should not use packages because they are 3rd party so if they wont be updated they can make issue for projects that have packages of previuos version

[@techieblossom]

That's always true. This package has good votes I think. You can understand the concept and maintain it yourself to reduce that depenedency.

[@balaji-venkatraman]

Not understood the size_config.dart

[@gaurijagtap65]

Hello sir , i have to add svg file in my project , it has x and y values , can you plz teach me how can i calculate x and y values using sizeConfig file??

[@techieblossom]

By x and y, do you mean width and height? Why you want x and y? X and y are positions.

[@nirmalasudhir1457]

one more thing to ask how do you run both iOS and Andriod emulator in your machine?. I am using Linux with Android Studio. I am able to start Android Emulator but No idea how can I use iOS emulator. It would be great if you explain this as well. Thanks in advance

[@techieblossom]

IOS simlators can only run on Mac machines as far as I know.

[@nirmalasudhir1457]

@@techieblossom oh ok. thanks for quick reply

[@usamashahbaz8060]

Brother what are your PC specs?

[@niyazitoros9190]

I got confused without your code. I made this, but I need to make this in class for string like title, subtitle, body, header 1 etc. So without your code I am lost. Widget build(BuildContext context) { SizeConfig().init(context); double _fontSize; if (MediaQuery.of(context).orientation == Orientation.portrait) { // is portrait _fontSize = SizeConfig.safeBlockHorizontal * 5; } else { // is landscape _fontSize = SizeConfig.safeBlockVertical * 5; } return Scaffold( body: Center( child: Text( 'Scaling text!', style: TextStyle( fontSize: _fontSize, ), ), ), ); }

[@techieblossom]

Code - github.com/TechieBlossom/learning_platform_app

[@marufhassan634]

The content is great but you looked puzzled. You wrote all the code earlier so you should have just made a script and then given audio. Hope to see more organized content

[@techieblossom]

You can watch recent 11-12 videos which are organized.

[@ogulcankarayel5625]

Images._(), is it singleton pattern or what ? thanks

[@techieblossom]

It restricts to create instances of the class. Can be treated as singleton

[@MikeNugget]

Do you use media queries for responsive design?

[@techieblossom]

Sort of

[@godmakoto1041]

In your opinion is it better flutter or ionic?

[@techieblossom]

Didn't work on ionic.

[@godmakoto1041]

@@techieblossom i was meaning that wich do you think is the best for cross platform developing

[@techieblossom]

I never saw ionic code, but i saw performance. To me it looked like creating a web like app. Like html and all. So, I prefer Flutter.

[@erperejildo]

What do you prefer for Flutter? VSCode or Studio?

[@techieblossom]

Studio

[@akshay6019]

Code

[@aminansari3091]

Hello, I am also doing responsive app using ionic framework. But, I am facing lot of issues. I am requesting you give some idia. how to make responsive app using ionic.

[@techieblossom]

No idea about ionic.

[@RAHULRAJ-iw1bw]

Hi Bro, for responsive design , media query is not required?

[@techieblossom]

Required.

[@RAHULRAJ-iw1bw]

@@techieblossom where u wrote media query in this tutorial bro....

[@techieblossom]

Okay. Got it. Since, I used LayoutBuilder, I got size from constraints. So, instead of media query, we can use layout builder also. Both give same output

[@RAHULRAJ-iw1bw]

Thanks for the support bro...😍

[@ogulcankarayel5625]

Can ı use size_config file for any project in flutter ?

[@techieblossom]

Yes

[@GoluSingh-jx3id]

Its confusing .... little bit ... Can you please do something .... Can you share your project on github

[@techieblossom]

Please read the medium post for this article - “Flutter Responsive UI for Learning Platform App” by Prateek Sharma link.medium.com/S610TkmCt0

[@shreyashsingh9914]

Amazing 🔥 but didn't worked of drawer

[@techieblossom]

What didn't work for drawer?

[@devRTC]

Is it better than screenutil lib in dart packages?

[@techieblossom]

To be honest, nowadays I use ScreenUtil. Mostly similar concept here, with one extra factor of scale if you have a default width height by designer

[@devRTC]

@@techieblossom Hey Are there more packages similar to this one for creating responsive UI ? Which is the best or good to use?

[@devRTC]

@@techieblossom Hey do you know how to use Adobe XD art board design width and height in screenutil for flutter?

[@techieblossom]

Ya. My second last tutorial was on Adobe XD itself.

[@devRTC]

@@techieblossom Hey, Please provide your email, need frequent talk if possible or any other medium or I could provide my WhatsApp number. Do you use whatsapp? Thank You

[@nongnghiepvacongngheso2265]

Can you give me this source code. Thanks!!!

[@munaimnaeem9951]

How you use IOS simulator at window??? Please tell me

[@techieblossom]

Never tried. I have never run flutter in windows. Linux and mac only

[@munaimnaeem9951]

@@techieblossom then how you run android simulator on mac?

[@techieblossom]

Android SDK is there for mac also.

[@MarkyMarking]

Video starts at 14:33

[@Mfbzai]

47K Viewer

[@user-eh4fm7uq6w]

same approach in 2024 ? or any other approach?

[@techieblossom]

Definitely there are more better ways.

[@techieblossom]

There are 2 concepts basically Have separate widgets for landscape and portait where UI is complex. Like master detail page layouts. And make responsive using any responsive builder plugin

[@user-eh4fm7uq6w]

@@techieblossom Is there any right video or any blog regarding this, I wants to make responsive text & images without using 3rd party library only in portrait mode.

[@techieblossom]

@user-eh4fm7uq6w I can myself explain more on this, and suggest you solutions on call. If you are ok, kindly book a slot on www.topmate.io/prateeksharma

[@pixel7038]

SAFEAREA

[@AndrewProjectos]

This is really hard to watch

[@oualitsenramdane454]

You should've focused on the responsiveness not the themes bro!

[@techieblossom]

Didn't you get the responsiveness knowledge enough in this video?

[@oualitsenramdane454]

@@techieblossom not really, because it did not focus on specifically that!

[@techieblossom]

Well, I didn't find much of the themes used. Little bit of theme used so that the viewers don't find me writing much duplicate code, hence making things easier for them. If you don't want to do that, probably you might find some good plugins created in pub.dev around the same idea. This particular video focuses on a single concept of multiplier, which I think is clear in the starting few minutes of the video.

[@sundaramoorthykuppuswamy2745]

Just Amazing stuff just I've learned thanks man 🫂