A low-cost Flutter screen adaptation solution (a very low-cost Flutter screen adaptation solution)

100% restore UI, just write according to the width and height of the design drawing

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

1. 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 ());

}

2. 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(),
      ),
    )

3. Get Size

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

4. 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" ,
    ),
  )

5. 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)

6. 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

Download low-cost Flutter screen adaptation source code on GitHub

A low-cost Flutter screen adaptation solution（一个极低成本的 Flutter 屏幕适配方案）
https://github.com/niezhiyang/flutter_autosize_screen
23 forks.
107 stars.
9 open issues.

Recent commits:

• Update README.md, GitHub
• Merge pull request #4 from Phyzait/patch-1Update README.md, GitHub
• Update README.mdfix wrong words, GitHub
• 修改md, niezhiyang
• 修改md, niezhiyang