How to get responsive Flutter layouts?

Question

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.

Answer 1

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.