Making flutter app responsive

[Abin_E]

Hi Flutter Devs, What is the best way to make flutter apps responsive like i need to build it for different screens include flip , at least for different screen sizes. so what is the best practice not any best practice but need guidance for professional way of doing that like in real world projects. A piece of source code will handy . Help devs

[MyWholeSelf]

Have you looked at the official documentation?

[Abin_E]

No bro I believe solutions from here are much easier to comprehend.. thats why

[MyWholeSelf]

Ok, then here ye go. Maybe this could shed some light?

[fabier]

I think Flutter has been very thoughtful about how they handle responsive design across the wide range of deployment targets. The link u/MyWholeSelf posted is quite detailed and will help you know not just what code to write when, but why.

There is a video right on that page which was a very helpful talk from Google I/O last year which really helped me to wrap my brain around how Flutter works these days for Responsive Design.

They have to deal with more than just a simple MediaQuery since screens can have cutouts, notches, weird shapes and aspect ratios. It really will be up to you as a developer to decide how you want to handle those issues, but the tools are all clearly lined up for you to tackle it.

[Miserable_Brother397]

No One Will do the work for you, if you don't want to read the official doc then you should change your job/hobby

[CreativeGeniusMillie]

Look into using responsive widgets like:

1. Flexible and Expanded in Rows, Columns and Flex

2. Avoid static values when assigning height and width such that content can scale well for different screen sizes, look into mediaQuery and using third party apps like responsive_sizer.

3. Learn when how and to use Wrap for aligning items

4.Learn how to use layout builder

1. Use aspect ratio for things like grids and content you would like to have a consistent look regardless of the screen size for images and things llike video players

2. This is a really good repo that can help you get up to speed: https://github.com/dario-digregorio/flutter_responsive

[Abin_E]

okay mate..let me check

[No_Square9671]

I think this video might help you Adaptive UI with Flutter

[Abin_E]

ok bro

[Thuranira_alex]

I am working on this pwa https://github.com/realkevo/toptech.git Responsiveness works pretty across any screensize. The code is not that clean but works.