Look at the picture first, the standard width is set to 360

iPhone 8 ——————————- iPhone 11 :

iPhone 12 pro max ——————— ipad air :

android figure

768×1280-320dpi———-10801920-420dpi———-1440×2560-560dpi

web diagram

As the screen is elongated, the width will gradually become larger than the height, and when it is larger, the height will be used as the benchmark.

use

Quote

flutter_autosize_screen: ^{LAST_VERSION}

initialization

Initialize in the first line of the main method. The following benchmarks are generally based on the width. Write the width dimension of the Ui design drawing directly. If it is in the horizontal screen state, the 360 below is based on the height.

void  main () {
   // Set the benchmark or take Apple 6,375 as the standard, isAutoTextSize indicates whether the text changes with the system font size change, the default is true 
  AutoSizeUtil . setStandard ( 360 ,isAutoTextSize :  true );

  // Use runAutoApp instead of runApp 
  // 
  import'package :flutter_autosize_screen/binding.dart'; runAutoApp ( const  MyApp ());

}

Replace the MediaQuery of the root MaterialApp

MaterialApp(
      title :  'Autosize Demo' ,
       /// Replace, so that you can use MediaQuery.of(context) to get the correct Size in the future
      builder: AutoSizeUtil.appBuilder,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: HomePage(),
      ),
    )

Get Size

AutoSizeUtil.getScreenSize()
//或者
MediaQuery.of(context).size

Write directly according to the size of the design drawing

Container(
    alignment: Alignment.center,
    height: 60,
    width :60,
    color: Colors.redAccent,
    child :  Text (
       "Write the size directly according to the design drawing" ,
    ),
  )

Get the real size, for example, kToolbarHeight is 56

// Get the real size with the following method, and then set it to 
AutoSizeUtil on the toolbar . getRealSize (kToolbarHeight)

Remember not to use window to get size or get MediaQuery
~~window.physicalSize~~
~~MediaQueryData.fromWindow(window)~~

Next target

Because the screen width and height are modified from the root, some system widgets may be larger or smaller than normal. For example, the default height of the toorbar is kToolbarHeight = 56.0, so if the width standard is set to 112, then kToolbarHeight will appear Very high, and Text (bodyText2) defaults to 14, which will be very large, so the next plan is to restore the default system widgets. Everyone can give me good suggestions