Flutter自动适配屏幕插件flutter_autosize_screen的使用

Flutter自动适配屏幕插件flutter_autosize_screen的使用

100% 还原UI，只需要按照设计图写的宽高写即可

先看图片，设置的标准宽度是 360

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

iPhone 12 pro max --------------------- iPad Air:

android 图

768x1280-320dpi----------10801920-420dpi----------1440x2560-560dpi

web 图

随着拉长屏幕，慢慢的宽度会大于高度，当大于的时候，会以高度为基准。

使用

引用

flutter_autosize_screen: ^{LAST_VERSION}

初始化

1. 在main方法的第一行就初始化，下面的基准一般以宽度为基准，直接写UI设计图的宽度尺寸，如果是横屏状态的下面的360就是以高度为基准。

void main() {
  // 设置基准 或者以苹果6，375 为标准, isAutoTextSize 表示文字是否随着系统的字体大小更改而更改，默认是 true
  AutoSizeUtil.setStandard(360,isAutoTextSize: true);

  // 使用 runAutoApp 来代替 runApp
  // import 'package:flutter_autosize_screen/binding.dart';
  runAutoApp(const MyApp());

}

1. 替换根MaterialApp的MediaQuery

MaterialApp(
      title: 'Autosize Demo',
      /// 替换，这样可以在以后 使用 MediaQuery.of(context) 得到 正确的Size
      builder: AutoSizeUtil.appBuilder,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: HomePage(),
      ),
    )

1. 获取Size

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

1. 直接按照设计图的尺寸写即可

Container(
    alignment: Alignment.center,
    height: 60,
    width :60,
    color: Colors.redAccent,
    child: Text(
      "直接按照设计图写尺寸",
    ),
  )

1. 获取真正的大小，比如kToolbarHeight是56

// 一下方法获取到真正的大小，然后设置到 toolbar上
AutoSizeUtil.getRealSize(kToolbarHeight)

1. 切记 不能使用window获取size或者是获取MediaQuery

// 错误示范
// window.physicalSize
// MediaQueryData.fromWindow(window)

下一个目标

因为从根修改了屏幕宽高，会引起一些系统Widget，有可能比正常的大或者小，比如toorbar的高度默认是kToolbarHeight = 56.0，这样如果把宽度标准设置成112的话，那这kToolbarHeight就会显得很高，还有Text（bodyText2）默认的是14，也会非常大，所以下一个计划是还原一下默认的系统widget。大家有好的建议也可以提给我。

原理

详细原理可以参考掘金

Thank

感谢 FlutterTest

示例代码

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_autosize_screen/auto_size_util.dart';
import 'package:flutter_autosize_screen/binding.dart';

void main() {
  AutoSizeUtil.setStandard(360,isAutoTextSize: true);
  runAutoApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Autosize Demo',
      builder: AutoSizeUtil.appBuilder,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: HomePage(),
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  TextStyle _style = TextStyle(color: Colors.white);
  GlobalKey _keyGreen = GlobalKey();
  GlobalKey _keyBlue = GlobalKey();

  [@override](/user/override)
  void initState() {
    super.initState();
    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
      var renderBox = _keyGreen.currentContext!.findRenderObject()!.paintBounds;
      var sizeGreen = renderBox.size;
      print("${sizeGreen.width} ----- ${sizeGreen.height}");

      var renderBlu = _keyBlue.currentContext!.findRenderObject()!.paintBounds;
      var sizeBlue = renderBlu.size;
      print("${sizeBlue.width} ----- ${sizeBlue.height}");
      print("${AutoSizeUtil.getScreenSize()}");
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    var originalSize = window.physicalSize / window.devicePixelRatio;
    var nowDevicePixelRatio = MediaQuery.of(context).devicePixelRatio;

    return Scaffold(
      appBar: AppBar(
        title: Text("Autosize Demo"),
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Row(
              children: [
                Expanded(
                  child: Container(
                    alignment: Alignment.center,
                    key: _keyGreen,
                    height: 60,
                    color: Colors.redAccent,
                    child: Text(
                      "使用Expanded平分屏幕",
                      style: _style,
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    alignment: Alignment.center,
                    height: 60,
                    color: Colors.blue,
                    child: Text(
                      "使用Expanded平分屏幕",
                      style: _style,
                    ),
                  ),
                ),
              ],
            ),
            Row(
              children: [
                Container(
                  alignment: Alignment.center,
                  key: _keyBlue,
                  width: 180,
                  height: 60,
                  color: Colors.teal,
                  child: Text(
                    "宽度写的是 180",
                    style: _style,
                  ),
                ),
                Container(
                  alignment: Alignment.center,
                  width: 180,
                  height: 60,
                  color: Colors.grey,
                  child: Text(
                    "宽度写的是 180",
                    style: _style,
                  ),
                ),
              ],
            ),
            Container(
              alignment: Alignment.center,
              width: 360,
              height: 60,
              color: Colors.purple,
              child: Text(
                "宽度写的是 360",
                style: _style,
              ),
            ),
            SizedBox(
              height: 50,
            ),
            Text("原始的 size: $originalSize "),
            Text("原始的 分辨率: ${window.physicalSize} "),
            Text("原始的 devicePixelRatio: ${window.devicePixelRatio} "),
            Container(
              margin: EdgeInsets.symmetric(vertical: 20),
              alignment: Alignment.center,
              width: 360,
              height: 10,
              color: Colors.grey,
            ),
            Text("更改后 size: ${MediaQuery.of(context).size}  "),
            Text("更改后 devicePixelRatio: $nowDevicePixelRatio"),
          ],
        ),
      ),
    );
  }
}