CODEWITHSUNDEEP
user-interfaceflutterdart
Ali Murat
Ali Murat

Reputation: 161

How to design a screen resolution compatible UI in Flutter?

The design of an application I developed with Flutter is broken on devices with different screen sizes (tablet vs. phone). Cards and containers overlap and vary in size. What is your suggestion?

Upvotes: 0

Views: 458

Answers (2)

Alberto Miola
Alberto Miola

Reputation: 4751

I really suggest you to give a look at the LayoutBuilder class that's been created exactly to solve your problem. Give a look at the doc for every info; here's a simple usage:

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < YOUR_SIZE)
      return Column();
    else
      return GridView();       
  },
),

Very intuitively: if the width of the device is lower than YOUR_SIZE, the screen is not so "wide" and a column fits well. Otherwise you could place your widgets in a grid with N columns probably.

Official video about LayoutBuilder on YouTube.

Use widgets composition instead of functions that return Widget. Functions are NOT optimized, you can't const-construct the widget and they get rebuilt every time!

Upvotes: 2

Lo&#239;c Fonkam
Lo&#239;c Fonkam

Reputation: 2340

To make the size of any widget proportional with any device, you need to get the device width and height before setting widget size. For instance, to create a container of size that is responsive to any device height and width and also scale when rotated, you need to use the MediaQuery to get the device height and width to scale you widget size as follows: 

 ....


     @override
        Widget build(BuildContext context){
             double _height = MediaQuery.of(context).size.height;
             double _width = MediaQuery.of(context).size.width;
             return Container(
                  height: _width > _height ? _width / 10 : _height / 10,
                  width: _width > _height? ? _height / 10 : _widht / 10, 
                  child: AnyWidget(), 
             );
       }
       ...

Upvotes: 0

Related Questions