CODEWITHSUNDEEP
flutter
Patrick Wolf
Patrick Wolf

Reputation: 1319

How to get responsive Flutter layouts?

What is best practice for creating a responsive layout? I know that you can use media queries to get sizing information to dictate what to do; e.g. different screens for desktop, tablet, phone.

However, is it common practice to use Expanded or Flex properties to ensure widgets grow or fill the appropriate screen sizes? As a new Flutter developer, trying to understand how the balance is struck on typical use cases.

Upvotes: 8

Views: 8883

Answers (4)

zaid kherani
zaid kherani

Reputation: 1

var width = MediaQuery.of(context).size.width; //width of device

// now we can find the number x% which will return value 10 on multiplying 
//by the width of device 
var x = (1000/(width))/100; 

var ten = width * x; //now ten contains value 10.

//now we can use this value ten like:
ten * 1.5 //returns 15
ten * 3.5 //returns 35
ten * 4 //returns 40

Container(
  heigth: ten * 3.7, //height = 37
)

Upvotes: 0

urmish patel
urmish patel

Reputation: 711

In responsive UI we don’t use hard-coded values for dimension and positions. Use Sizer plugin to get the real time size of the window. a busy cat

Responsive UI in any screen size device also tablet. Check it this plugin ⬇️
https://pub.dev/packages/sizer

.h  - for widget height
.w  - for widget width
.sp - for font size

Use .h, .w, .sp after value like this ⬇️

Example:

Container(
  height: 10.0.h,  //10% of screen height
  width: 80.0.w,   //80% of screen width
  child: Text('Sizer', style: TextStyle(fontSize: 12.0.sp)),
);

I have build many responsive UI with this plugin.

Upvotes: 8

Miguel Ruivo
Miguel Ruivo

Reputation: 17746

There are multiple ways to make your UI responsive in Flutter, but just to name a few rules of thumb that will mostly get the job done:

MediaQuery

You can set some widget height or width based on a portion of the screen, for example, creating a SizedBox that will fill 50% of the screen both vertically and horizontally:

SizedBox(
  height: MediaQuery.of(context).size.height * 0.5,
  width: MediaQuery.of(context).size.width * 0.5,
)

There are other properties that might interest you in the MediaQuery such as the padding from the safe area viewport and so on. You can also find a good article about it here.

LayoutBuilder

One of the most interesting widgets when it comes to build layouts. It will provide you with the parent constraints so you can use it to dynamically adapt your UI.

For example, this will make your child (SizedBox) widget take the parent's maxWidth.

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints){
   return SizedBox(
              width: constraints.maxWidth
          );
     }
)

Some interesting article about LayoutBuilder can be found here.

Flex

By using Flex widgets such as Expanded and Flexible. When used in a Row or Column they'll dynamically adapt based on the constraints imposed by them and along with Column and Row alignments/size they are quite powerful enough to make your UI responsive.

For example, you can have a two Containers in one Row where one uses 1/4 of the view and the other takes 3/4 of the space available.

Row(
  children: <Widget>[
         Expanded(
           flex: 1,
           child: Container(),
         ),
         Expanded(
           flex: 3,
           child: Container(),
         ),
      ]
)

Another great article about it can be found here.

Platform

Also, you can always lookup for the underlying platform to make some decisions by using the Platform class getters.

import 'dart:io';

if(Platform.isAndroid) {
   print('Running on Android');
}

TL;DR: There are a lot of options that can be played together, you should always look for the best approach for each scenario.

Upvotes: 14

aminrd
aminrd

Reputation: 5000

I still think it is better to get the screen size using this commands. You have more control and and you can make your design responsive.

double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;

There is another package called size_configure that helps you to make your Flutter app responsive. Just import the package and then use it to make your app responsive.

  • use textSizeMultiplier to set Text size
  • use imageSizeMultiplier to set Image size
  • use heightMultiplier to set height size
  • use weightMultiplier to set weight size
    For example: If you want to set the text size to 28 Divide 28 to 7.9 (because it's text, so we use 'Vertical Block Size') and then multiply it textSize Multiplier

Upvotes: 0

Related Questions