Flutter Responsive Design (MediaQuery, Orientation)

Рет қаралды 58,026

2 жыл бұрын

How to create responsive designs using the Flutter MediaQuery and OrientationBuilder to build designs for mobile phone, tablet and web.
Click here to Subscribe to Johannes Milke: kzfaq.info...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/medi...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/#/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)

Пікірлер: 51

@HeyFlutter 2 жыл бұрын

This might help you :) 👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com Source Code: github.com/JohannesMilke/media_query Glassmorphism Design Tutorial: kzfaq.info/get/bejne/jd6AbKRz38zLn6s.html Neumorphism Design Tutorial: kzfaq.info/get/bejne/d5hylcujmKqrlGQ.html Material Design & Cupertino Design Tutorial: kzfaq.info/get/bejne/jceqddSAltDefmw.html Nested ListViews and Columns Tutorial: kzfaq.info/get/bejne/kNZ4qKSTvr2wY6s.html ChatApp UI Design Tutorial: kzfaq.info/get/bejne/m62Yqa9hnZiRgJc.html Flexible Widget Tutorial: kzfaq.info/get/bejne/a7qndbt9v8q6pp8.html Expanded Widget Tutorial: kzfaq.info/get/bejne/hJd2gLtl16rSZo0.html Spacer Widget Tutorial: kzfaq.info/get/bejne/pJqUfbmGydCYmZ8.html FittedBox Widget Tutorial: kzfaq.info/get/bejne/jdaEgLFy19S8lJc.html Flutter Layout Basics Tutorial: kzfaq.info/get/bejne/r7-oqMiFs6-onHU.html Row Layout Basics Tutorial: kzfaq.info/get/bejne/or9letd_0NzdmIE.html Column Layout Basics Tutorial: kzfaq.info/get/bejne/pL1po6SqqdmRp3k.html Expansion Tile Tutorial: kzfaq.info/get/bejne/rLiHjJB6tqfNnmQ.html Expansion Panel Tutorial: kzfaq.info/get/bejne/qJ18ZJdnyZ-9cWw.html Bottom Sheet Tutorial: kzfaq.info/get/bejne/ir6JqMSa2tHbZ3k.html Popup Dialog Tutorial: kzfaq.info/get/bejne/ataeYMKeyZuznGg.html Dropdown Menu Tutorial: kzfaq.info/get/bejne/sJaZm7iT3NK3eKc.html PageView Tutorial: kzfaq.info/get/bejne/qayImpChzdHGgYk.html Page Transition Animation Tutorial: kzfaq.info/get/bejne/lbhjeMKS1MyaaZc.html Horizontal ListView Tutorial: kzfaq.info/get/bejne/mMdxkq1m2bvYdYk.html

@isheriff82 2 жыл бұрын

Hi, can you do a tutorial on using appwrite and flutter, it's a firebase replacement, and it has come a long way, there's no tutorial of the new version that was released 0.15 and has a few breaking changes from what I understand!

@cholasimmons 2 жыл бұрын

"...For web or desktop wersion" 🤣 I love you man. Never stop helping us

@HeyFlutter 2 жыл бұрын

Thanks, Frank Simmons! 🙂

@zabinoori49 Жыл бұрын

I have watched many videos for responsive design but yours was the best thanks bro for helping

@HeyFlutter Жыл бұрын

Glad I could be of help, You are welcome Zabi Noori! 😊

@landrynganji8661 2 жыл бұрын

Waouh I remember asking you to shoot this video and today you shot it thank you very much

@HeyFlutter 2 жыл бұрын

Thank you, Landry NGANJI! 🙂

@muhammadqazmouz6604 Жыл бұрын

Oh!! That's really great Thx man

@HeyFlutter Жыл бұрын

You are welcome, Muhammad Qazmouz!

@niteshmethani9884 2 жыл бұрын

Hi Johannes, thank you so much for making such easy to follow tutorials. They are really useful and your explanations are also very easy to follow. Good work :) Also, could you make a tutorial on following: video calling, audio calling, screen sharing and screen recording in flutter. I would love to join your paid plan, if any, to learn these things from you.

@HeyFlutter 2 жыл бұрын

Thanks for the idea, Nitesh Methani! 🙂 I have added it to my list of ideas for future videos!

@haroldpepete Жыл бұрын

flutter, great tips, thanks

@HeyFlutter Жыл бұрын

Glad you liked it, haroldpepete 😀

@vishaldrajpara5343 2 жыл бұрын

Sir First of all hatsoff to you. Your videos and explainations are very easy to understand. Sir will you please make a video on how to implement the "terms and conditions" on the flutter app in a detail. So it will be greatfull for us if you do so. Thank you :)

@HeyFlutter 2 жыл бұрын

Thanks for the idea, Vishal D Rajpara! 🙂 I have added it to my list of ideas for future videos!

@devstuff2576 2 жыл бұрын

Awesome

@HeyFlutter 2 жыл бұрын

Thanks, dev stuff! 🙂

@kareemmohamed2199 Жыл бұрын

excellent

@HeyFlutter Жыл бұрын

Thank you, kareem mohamed! 🙂

@isheriff82 2 жыл бұрын

Hi, this tutorials are much appreciated and very helpful, I like to see if you can build a back end for a flutter app via flutter itself? Like a basic app, change the walk through image and text, change slider and maybe colors etc

@HeyFlutter 2 жыл бұрын

Thanks for the idea, Imran Sheriff! 🙂 I have added it to my list of ideas for future videos!

@antonior7821 2 жыл бұрын

Hi Sheriff, I'm pretty sure you can't use flutter itself as a back end, as I'm pretty sure it is just for UI. You would need to use dart or what ever language you are using with flutter. Unless someone else knows something i don't lol?

@isheriff82 2 жыл бұрын

@@antonior7821 I think flutter is just more than a UI, and yes I talking about building an admin panel out of flutter and using firestore or SQL for that interface, I understand that lots of people are using laravel, let's see, anyways thinks for Ur input much appreciated

@isheriff82 2 жыл бұрын

@@HeyFlutter thank you, much appreciated

@rosamelcachoful 2 жыл бұрын

@@antonior7821 yeah, you are right. Using flutter for backend has no sense because flutter is a Framework of Dart to make apps with UI, but without Flutter, Dart can be used to make backend and console apps.

@LeifRingstad Жыл бұрын

Good video. Could you consider making a video on responsive scaling design, like using flutter_screenutil or similar in combination with responsive layout?

@HeyFlutter Жыл бұрын

Thanks for the idea, Leif Ringstad! 🙂 I have added it to my list of ideas for future videos!

@leonardkiptala9734 Жыл бұрын

@@HeyFlutter i have used flutter_screenutil in my project. its good as it scales to design but am forced now to use the concept of this video as other phones are square and dont fit the original design that was rectangle . thanks for the support.

@aimahar90 2 жыл бұрын

Hi Johannes, I want the design to be responsive for all mobile devices for this I have used the mediaQuery , screenutil pakages etc but not responsive design for some devices, can you help me for responsive design for all mobile devices.

@HeyFlutter 2 жыл бұрын

Thank You Muhammad Ali Hassan! Follow this link: blog.codemagic.io/building-responsive-applications-with-flutter/ I hope you will get your answer 🙂

@user-zx8cn1xy4j 5 ай бұрын

useful

@HeyFlutter 5 ай бұрын

Thank you, @user-zx8cn1xy4j! 🙂

@khulowZA 2 жыл бұрын

This un related to this video.. Can you please do a video about Backendless where you keep a user logged in app for 2nd use without taking the user to the login page over and over? 🤔

@HeyFlutter 2 жыл бұрын

Thanks for the idea, C & O! 🙂 I have added it to my list of ideas for future videos!

@mohamedyashik1049 2 жыл бұрын

How to solve this invalid binary in flutter ios ipa upload in appstore?

@HeyFlutter 2 жыл бұрын

Hello, mohamed yashik! Follow this link: stackoverflow.com/questions/69229665/invalid-binary-issue-in-flutter-ios-build, I hope it will solve your problem. Thank You 🙂

@ryoichifaiz21 2 жыл бұрын

how about font size? i stuck to handle font size between mobile and tablet. i hope you show tutorial

@HeyFlutter 2 жыл бұрын

Hello, Muhammad Faiz! Follow this link: stackoverflow.com/questions/57210428/flutter-how-to-create-responsive-text-widget, I hope it will solve your problem. Thank You 🙂

@ryoichifaiz21 2 жыл бұрын

@@HeyFlutter great!. thank you

@user-zf2ck5kx3y 3 ай бұрын

How to know if window scale to left or right

@HeyFlutter 3 ай бұрын

Thank You @user-zf2ck5kx3y! Follow this link: stackoverflow.com/questions/49553402/how-to-determine-screen-height-and-width I hope you will get your answer 🙂

@user-zf2ck5kx3y 3 ай бұрын

@@HeyFlutter Thank you bro

@guywhocodes 4 ай бұрын

this is not responsive design. this is known as adaptive design.

@HeyFlutter 4 ай бұрын

Thanks for your feedback, @guywhocodes! 🙂

@abdulazizaboujib5590 2 жыл бұрын

Thanks for the great content , but why did you use the MediaQuery.of().size.shortestSide and not the MediaQuery.of().size.width in the last example ? what is the difference ?

@HeyFlutter 2 жыл бұрын

Thank You Abdulaziz Aboujib! Follow this link: medium.com/tagmalogic/widgets-sizes-relative-to-screen-size-in-flutter-using-mediaquery-3f283afc64d6 I hope you will get your answer 🙂