What is a Flutter?

If you are interested in this article, you already know something about Flutter. The most important thing to remember from reading this article is that Flutter can control any pixel on the screen (since it cannot control pixels in the status bar in Native development). But the Flutter controls the status bar, and therefore any pixel on the screen).

The heart of this article

Since we can control all the pixels, if we want to draw a rectangle, we can do this:

Container(
 height: 40,
 width: 60,
),
Copy the code

Now that Container has implemented a 40 by 60 rectangle, let’s see how it looks on iPhone 5s (4″ Display) and iPhone XS Max (6,46″ Display) :

As you’ve noticed above, the rectangle is smaller on the iPhone Xs Max than on the iPhone 5S.

This is because the Flutter rectangle is always 40 x 60 regardless of whether your App is running on an iPhone 5S, iPhone Xs Max or 13 storage iPad.

So how to solve it?

First, to make it easier to understand, let’s explain how to solve the problem in view form, and then write the code once we understand.

First, take out an empty View and add a grid to it, as shown below:

Then we call the cells of the grid ‘Blocks’.

Finally, we use ‘Blocks’ to divide the width and height of the rectangle, and then use ‘Blocks’ to represent the size of the view, assuming that we divide the width and height into 100 points, so that we can have a consistent UI for each display size.

coded

Dart create a new Dart file, size_config. Dart, and define a SizeConfig class in this file.

The import 'package: flutter/widgets. Dart "; class SizeConfig {}Copy the code

To use the MediaQueryData class in Flutter, which contains information about the screen size of the current device, we need to introduce Widgets. Dart.

Then define the following properties in SizeConfig:

The import 'package: flutter/widgets. Dart "; class SizeConfig { static MediaQueryData _mediaQueryData; static double screenWidth; static double screenHeight; static double blockSizeHorizontal; static double blockSizeVertical; }Copy the code

We need to write a constructor to initialize these properties:

class SizeConfig { static MediaQueryData _mediaQueryData; static double screenWidth; static double screenHeight; static double blockSizeHorizontal; static double blockSizeVertical; void init(BuildContext context) { _mediaQueryData = MediaQuery.of(context); screenWidth = _mediaQueryData.size.width; screenHeight = _mediaQueryData.size.height; blockSizeHorizontal = screenWidth / 100; blockSizeVertical = screenHeight / 100; }}Copy the code

Then you need to initialize SizeConfig in your home screen.

class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { SizeConfig().init(context); ... }}Copy the code

Then we can use the SizeConfig properties to define the width and height of your Container.

Widget build(BuildContext context) {
 return Center(
  child: Container(
   height: SizeConfig.blockSizeVertical * 20,
   width: SizeConfig.blockSizeHorizontal * 50,
   color: Colors.orange,
  ),
 );
}
Copy the code

Finally, on different screens, the rectangle is 50 percent as wide as the screen and 20 percent as tall.

Here’s what the rectangle looks like on the iPhone 5S and iPhone XS Max.

extension

If you’ve had a lot of experience with Flutter development, you’ve probably dealt with things like fringe screens, status bars, and navigation bars.

There is a handy Widget for handling these things in Flutter called ‘SafeArea’.

How do we implement SafeArea functionality in our grid approach

We need to add some other properties to the SizeConfig to calculate how much space SafeArea should take up and remove it from the grid.

class SizeConfig { static MediaQueryData _mediaQueryData; static double screenWidth; static double screenHeight; static double blockSizeHorizontal; static double blockSizeVertical; static double _safeAreaHorizontal; static double _safeAreaVertical; static double safeBlockHorizontal; static double safeBlockVertical; void init(BuildContext context) { _mediaQueryData = MediaQuery.of(context); screenWidth = _mediaQueryData.size.width; screenHeight = _mediaQueryData.size.height; blockSizeHorizontal = screenWidth / 100; blockSizeVertical = screenHeight / 100; _safeAreaHorizontal = _mediaQueryData.padding.left + _mediaQueryData.padding.right; _safeAreaVertical = _mediaQueryData.padding.top + _mediaQueryData.padding.bottom; safeBlockHorizontal = (screenWidth - _safeAreaHorizontal) / 100; safeBlockVertical = (screenHeight - _safeAreaVertical) / 100; }}Copy the code

This will allow you to adapt the UI efficiently without worrying about SafaArea.

How to adapt text?

You can use the same grid method adapted the text, I usually use SizeConfig. SafeBlockHorizontal to adaptation of text, but you can use SizeConfig. BlockSizeVertical to adaptation.

The effect of adaptation is as follows:

This article code for GitHub

All of the code used in this article can be found on GitHub below:

Github.com/dancamdev/e…

The original

Medium.com/flutter-com…