Making our app responsive and adaptive

In this section, we will use some of the tools and techniques we learned about in the previous section to improve our Flutter Academy app. We will make our Flutter Academy app responsive and adaptive.

Defining metrics for responsive design

First, we will start by defining some screen size constants. We will use some of the popular screen sizes on the market that are also used by other web application frameworks.

In chapter3_start/lib/res, create a file named responsive.dart. Inside this file, define the following class and the constants. As we are working on Flutter on the web, the sizes here are taken from Tailwind CSS, a popular CSS framework. You can use this or decide the sizes yourself by researching the common screen sizes:

class ScreenSizes {
  static const double xs = 480.0;
  static const double sm = 640.0;
  static const double md = 768.0;
  static const double lg = 1024.0;
 ...