Responsive UI

What does a responsive UI mean?

First, let’s understand what a responsive UI is. Having a responsive UI means having UI screens that are designed in such a manner that the screen looks similar on all types of devices, irrespective of screen size and resolution. Whether we open our app screens on a tablet, phone, or desktop, the screens should look somewhat similar on all of these devices.

We may think, ‘Why should a developer take care of this?’ We should take care of this because, when we are developing the app screens, we tend to build widgets (buttons, textboxes, etc.) according to the screen resolution of the emulator we’re working on. If we choose the button’s height as, say, 25, this basically means there are 25 pixels on that particular device or emulator. This 25 value in magnitude will have to be adjusted to different devices with different resolutions.

So, in short, making pixel-perfect screens is responsive UI.

Flutter’s screenutil package

To install this package, run the following command on a terminal inside our project folder:

flutter pub add flutter_screenutil

After installing the package, we may need to run the following command if we’re having trouble finding the package while importing:

flutter pub get

To use this package in our code, we have to do some configuration. First, we have to wrap our MaterialApp widget with the ScreenUtilInit widget coming from this package. Let’s find out how below: