Flutter Responsive Design (MediaQuery, Orientation)

Поделиться
HTML-код
  • Опубликовано: 25 окт 2024

Комментарии • 47

  • @HeyFlutter
    @HeyFlutter  2 года назад +1

    This might help you :)
    👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com
    Source Code: github.com/JohannesMilke/media_query
    Glassmorphism Design Tutorial: ruclips.net/video/WxP9ABzfgow/видео.html
    Neumorphism Design Tutorial: ruclips.net/video/A2Bbhr3DGd0/видео.html
    Material Design & Cupertino Design Tutorial: ruclips.net/video/WazBqO1jzN8/видео.html
    Nested ListViews and Columns Tutorial: ruclips.net/video/ZpHuAbYWL3w/видео.html
    ChatApp UI Design Tutorial: ruclips.net/video/eGhvL082-Pc/видео.html
    Flexible Widget Tutorial: ruclips.net/video/5TwBXLZdVvk/видео.html
    Expanded Widget Tutorial: ruclips.net/video/N1FMX4rDn6Y/видео.html
    Spacer Widget Tutorial: ruclips.net/video/n4dJVUdj4ik/видео.html
    FittedBox Widget Tutorial: ruclips.net/video/WpTMNArnXdc/видео.html
    Flutter Layout Basics Tutorial: ruclips.net/video/yYxueTNIDlA/видео.html
    Row Layout Basics Tutorial: ruclips.net/video/lY5GtNkvyhM/видео.html
    Column Layout Basics Tutorial: ruclips.net/video/nW9pAyDs-wE/видео.html
    Expansion Tile Tutorial: ruclips.net/video/vRWY-IQAin0/видео.html
    Expansion Panel Tutorial: ruclips.net/video/r7L146d9YA8/видео.html
    Bottom Sheet Tutorial: ruclips.net/video/TXYuaiukw7E/видео.html
    Popup Dialog Tutorial: ruclips.net/video/4pn-_md5Ol4/видео.html
    Dropdown Menu Tutorial: ruclips.net/video/z0ihUbwlSHs/видео.html
    PageView Tutorial: ruclips.net/video/sFXg-phkbQU/видео.html
    Page Transition Animation Tutorial: ruclips.net/video/_R3E_aof69c/видео.html
    Horizontal ListView Tutorial: ruclips.net/video/baA_J5tUtEU/видео.html

    • @isheriff82
      @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
    @cholasimmons 2 года назад +5

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

    • @HeyFlutter
      @HeyFlutter  2 года назад

      Thanks, Frank Simmons! 🙂

  • @zabinoori49
    @zabinoori49 Год назад

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

    • @HeyFlutter
      @HeyFlutter  Год назад

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

  • @landrynganji8661
    @landrynganji8661 2 года назад

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

    • @HeyFlutter
      @HeyFlutter  2 года назад

      Thank you, Landry NGANJI! 🙂

  • @niteshmethani9884
    @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
      @HeyFlutter  2 года назад

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

  • @vishaldrajpara5343
    @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
      @HeyFlutter  2 года назад

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

  • @isheriff82
    @isheriff82 2 года назад +1

    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
      @HeyFlutter  2 года назад

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

    • @antonior7821
      @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
      @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
      @isheriff82 2 года назад

      @@HeyFlutter thank you, much appreciated

    • @rosamelcachoful
      @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.

  • @muhammadqazmouz6604
    @muhammadqazmouz6604 Год назад

    Oh!! That's really great
    Thx man

    • @HeyFlutter
      @HeyFlutter  Год назад +1

      You are welcome, Muhammad Qazmouz!

  • @haroldpepete
    @haroldpepete 2 года назад

    flutter, great tips, thanks

    • @HeyFlutter
      @HeyFlutter  2 года назад

      Glad you liked it, haroldpepete 😀

  • @LeifRingstad
    @LeifRingstad 2 года назад

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

    • @HeyFlutter
      @HeyFlutter  2 года назад +1

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

    • @leonardkiptala9734
      @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
    @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
      @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 🙂

  • @khulowZA
    @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
      @HeyFlutter  2 года назад

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

  • @kareemmohamed2199
    @kareemmohamed2199 Год назад

    excellent

    • @HeyFlutter
      @HeyFlutter  Год назад

      Thank you, kareem mohamed! 🙂

  • @عالمالطبيعة-ط9ه
    @عالمالطبيعة-ط9ه 6 месяцев назад

    How to know if window scale to left or right

    • @HeyFlutter
      @HeyFlutter  6 месяцев назад

      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 🙂

    • @عالمالطبيعة-ط9ه
      @عالمالطبيعة-ط9ه 6 месяцев назад

      @@HeyFlutter Thank you bro

  • @ryoichifaiz21
    @ryoichifaiz21 2 года назад

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

    • @HeyFlutter
      @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
      @ryoichifaiz21 2 года назад

      @@HeyFlutter great!. thank you

  • @mohamedyashik1049
    @mohamedyashik1049 2 года назад

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

    • @HeyFlutter
      @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 🙂

  • @abdulazizaboujib5590
    @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
      @HeyFlutter  2 года назад +1

      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 🙂

  • @guywhocodes
    @guywhocodes 7 месяцев назад +1

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

    • @HeyFlutter
      @HeyFlutter  7 месяцев назад +1

      Thanks for your feedback, @guywhocodes! 🙂

  • @ajaypangare2487
    @ajaypangare2487 2 года назад

    instagram snapping scroll flutter

    • @HeyFlutter
      @HeyFlutter  2 года назад

      Thank you, Ajay Pangare! 🙂

  • @landrynganji8661
    @landrynganji8661 2 года назад

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

    • @HeyFlutter
      @HeyFlutter  2 года назад

      Thank you, Landry NGANJI! 🙂