How to make existing Flutter App Project Responsive?

Issue

I am working on a Flutter project currently and I suddenly realized that it was not responsive when I tried it on various android phones with different sizes and screen dimensions. There are some cases when the phone is big the text and images are not in their proper place and some overflows. I am already halfway with my project but I don't know how will it be responsive. Any ideas will be much appreciated. Thanks!

Solution

You can make responsive with LayoutBuilder like:

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    if (constraints.maxWidth  >= 600){
        return Widget(...); // if bigger than
    }
    return Widget(); // else use default
  }
)

You can use the BoxConstraints methods and check to show diffrent layout and widget

You can use MediaQuery too, just search about it but when we are talking about whole page structure in diffrent devices, its better to use LayoutBuilder

there are tons of videos for your purpose:

• video from youtube

Answered By - mohammad esmaili