Making an app responsive

Hopefully, the previous section demonstrated the importance of building applications that can look nice no matter what environment they are running in, especially when using a multiplatform framework such as Flutter. Now let’s explore how to make the Notes frontend application responsive, allowing us to adjust the layout of the application for the available screen size.

Take a look at the Notes application running on the desktop. If you resize the window, you’ll notice that regardless of the size of the window, the grid view remains two-column. While this is fine for a mobile or tablet device, on a large screen we are wasting screen real estate. Instead, we will use the ScreenType enum defined in utils/screen_type.dart to decide how many rows to display. Open that file and examine its contents:

enum ScreenType {
  desktop._(minWidth: 901),
  tablet._(minWidth: 601, maxWidth: 900),
  handset._(maxWidth: 600)...