Proportional spacing with the Flexible and Expanded widgets

Today, almost every device has a different height and width. Some devices also have a notch at the top of the screen that insets into the available screen space. In short, you cannot assume that your app will look the same on every screen——your user interfaces have to be flexible.

In this recipe, we will demonstrate two ways to develop proportional widgets: Flexible and Expanded widgets.

Getting ready

You should have completed the project in the previous recipe before starting this one.

Create a new Dart file called flex_screen.dart and create the requisite StatelessWidget subclass called FlexScreen. Also, just like the last recipe, replace the home property in main.dart with FlexScreen.

How to do it...

Before we can show off Expanded and Flexible, we need to create a simple helper widget:

1. Create a new file, called labeled_container.dart, and import material.dart.
...