Since we have full control on all the pixels, we might want to draw a rectangle like this.

Container(
 height: 60,
 width: 80,
),

We have a rectangle, but now, look at what happens if we display it on an iPhone 5s (4″ Display) and on an iPhone XS Max (6,46″ Display).

You can Download Source Code via Github.

got it, but how can I fix it?

Start creating a new dart file called ‘size_config.dart’, within it, define the SizeConfig class.


import 'package:flutter/widgets.dart';

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;
	}
}

This is all that’s left to do is to instantiate this object in your home screen.

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

main.dart

import 'package:flutter/material.dart';
import 'package:scale_ui/SizeConfig.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scale UI to different multiple display sizes',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Scaffold(
      body: Center(
        child: Container(
          height: SizeConfig.safeBlockVertical * 25,
          width: SizeConfig.safeBlockHorizontal * 40,
          color: Colors.yellow,
        ),
      ),
    );
  }
}

class TextScalePage extends StatefulWidget {
  @override
  _TextScalePageState createState() => _TextScalePageState();
}

class _TextScalePageState extends State<TextScalePage> {
  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Scaffold(
      body: Center(
        child: Text(
          'Scaling text!',
          style: TextStyle(
            fontSize: SizeConfig.safeBlockHorizontal * 10,
          ),
        ),
      ),
    );
  }
}

You can Download Source Code via Github.