Achieving screen responsiveness in flutter

One of the challenges of building applications with flutter is responsiveness. As we have MediaQuery in CSS, it can also be used in flutter to get the size, orientations and other information about the user screen. This has been a huge help but still we still have other issues.

Take for instance, building an application that has a screen with more than one section here let’s say two. We can then apply MediaQuery.of(context).height * 0.4 (40 percent of the device screen) or any any value to divide the screen into the desired fractions.

Here we’ve solved the screen division problem but while working on the application we’ll likely run into an overflow error while assigning sizes to widgets in these divisions. We will encounter this error as we are using the same font size or container size we would have used for the full screen even though we are now working on a fraction of the screen. This error can be solved in different ways like manipulating the widgets sizes until all can fit in without the overflow error but this will only work for our current screen, as when the app is run on a smaller screen we will have the overflow error back.

A way to solve this effectively is to make the widget(font, container and others) relative to the size of the screen. This is implemented in @theflutterway Complete E-Commerce Flutter UI on youtube. The idea is simple, we create a function that takes the height of the widget from the design and the screen size used in the design then return a value with which we can use for our current screen. Hence the function will return a bigger font for a bigger screen and vice versa while following the same design.

Here’s the implementation, we create a size_config.dart file in the lib folder and we import the SizeConfig class in our screen files. It should be noted that in the implementation below the design screen is sized 812 by 375.

import ‘package:flutter/material.dart’;

class SizeConfig {
static MediaQueryData _mediaQueryData;
static double screenWidth;
static double screenHeight;
static double defaultSize;
static Orientation orientation;

void init(BuildContext context) {
_mediaQueryData = MediaQuery.of(context);
screenWidth = _mediaQueryData.size.width;
screenHeight = _mediaQueryData.size.height;
orientation = _mediaQueryData.orientation;
}
}

// Get the proportionate height as per screen size
double getProportionateScreenHeight(double inputHeight) {
double screenHeight = SizeConfig.screenHeight;
// 812 is the layout height that the designer use
return (inputHeight / 812.0) * screenHeight;
}

// Get proportionate width as per screen size
double getProportionateScreenWidth(double inputWidth) {
double screenWidth = SizeConfig.screenWidth;
// 375 is the layout width that the designer use
return (inputHeight / 375.0) * screenWidth;
}

then the function can be called using

import ‘size_config.dart’;
Text(“Responsive Text”, style: TextStyle(fontSize: getProportionateScreenWidth(28),)
SizedBox(height: SizeConfig.screenHeight * 0.1)

Even though the example shows the implementation in flutter, i believe this can be used in other front end framework where responsiveness is desirable.

Thanks.