Flutter – Responsive and Adaptive Apps
Whenever we are developing an app we usually develop it for a single device but it is not meant for use only on a single device but on different devices of different sizes and in case of flutter it also provides us the facility to develop for the web at the same time. So we have to deal with a range of different sizes. Here we will be discussing how to deal with this problem.
To deal with this problem we will be using the MediaQuery class of Flutter. This class provides us with information related to the size of the screen the app is running on. the size attribute provides us with the size and has width and height of the device.
We will be developing a simple app that is going to tell us on which platform we are and the width of the device. It is just a simple app that will get us started with responsive apps. We will be testing the app on flutter for the web for checking for its responsiveness.
First, we are going to initialize the app in main.dart with a simple Home widget which we will be developing in a separate dart file called home.dart.
In the home.dart we will be writing some functions to define the sizes of the different devices. We have defined the functions to check the size of the device. The MediaQuery.of(context).size.width requires a context which is a build context, so we will be using these functions inside the build function.
After this, we defined three more widgets to deal with different sizes. We have defined the widgets in the same dart file but for developing complex widgets we can make separate files for these widgets.
Run the app and adjust the window to see the different outputs.
Output for Mobile Screen size: