《Flutter入门疑难杂症》 Flutter的UI适配方案

本文后面已经被我用新的extension大法替代咯 ,有兴趣的可以看我写的这篇文章.
https://blog.csdn.net/WZAHD/article/details/111404843?spm=1001.2014.3001.5501

话不多说先上代码：

import 'package:flutter/material.dart';
import 'dart:ui' as ui show window;

/**
 * @Author: thl
 * @GitHub: https://github.com/Sky24n
 * @Email: 863764940@qq.com
 * @Email: sky24no@gmail.com
 * @Description: Screen Util.
 * @Date: 2018/9/8
 */

///默认设计稿尺寸（单位 dp or pt）
double _designW = 375.0;
double _designH = 812.0;
double _designD = 2.0;

/**
 * 配置设计稿尺寸（单位 dp or pt）
 * w 宽
 * h 高
 * density 像素密度
 */

/// 配置设计稿尺寸 屏幕 宽，高，密度。
/// Configuration design draft size  screen width, height, density.
void setDesignWHD(double w, double h, {double density = 3.0}) {
  _designW = w ?? _designW;
  _designH = h ?? _designH;
  _designD = density ?? _designD;
}

/// Screen Util.
class ScreenUtil {
  double _screenWidth = 0.0;
  double _screenHeight = 0.0;
  double _screenDensity = 0.0;
  double _statusBarHeight = 0.0;
  double _bottomBarHeight = 0.0;
  double _appBarHeight = 0.0;
  MediaQueryData _mediaQueryData;

  static final ScreenUtil _singleton = ScreenUtil();

  static ScreenUtil getInstance() {
    _singleton._init();
    return _singleton;
  }

  _init() {
    MediaQueryData mediaQuery = MediaQueryData.fromWindow(ui.window);
    if (_mediaQueryData != mediaQuery) {
      _mediaQueryData = mediaQuery;
      _screenWidth = mediaQuery.size.width;
      _screenHeight = mediaQuery.size.height;
      _screenDensity = mediaQuery.devicePixelRatio;
      _statusBarHeight = mediaQuery.padding.top;
      _bottomBarHeight = mediaQuery.padding.bottom;
      _appBarHeight = kToolbarHeight;
    }
  }

  /// screen width
  /// 屏幕 宽
  double get screenWidth => _screenWidth;

  /// screen height
  /// 屏幕 高
  double get screenHeight => _screenHeight;

  /// appBar height
  /// appBar 高
  double get appBarHeight => _appBarHeight;

  /// screen density
  /// 屏幕 像素密度
  double get screenDensity => _screenDensity;

  /// status bar Height
  /// 状态栏高度
  double get statusBarHeight => _statusBarHeight;

  /// bottom bar Height
  double get bottomBarHeight => _bottomBarHeight;

  /// media Query Data
  MediaQueryData get mediaQueryData => _mediaQueryData;

  /// screen width
  /// 当前屏幕 宽
  static double getScreenW(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    return mediaQuery.size.width;
  }

  /// screen height
  /// 当前屏幕 高
  static double getScreenH(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    return mediaQuery.size.height;
  }

  /// screen density
  /// 当前屏幕 像素密度
  static double getScreenDensity(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    return mediaQuery.devicePixelRatio;
  }

  /// status bar Height
  /// 当前状态栏高度
  static double getStatusBarH(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    return mediaQuery.padding.top;
  }

  /// status bar Height
  /// 当前BottomBar高度
  static double getBottomBarH(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    return mediaQuery.padding.bottom;
  }

  /// 当前MediaQueryData
  static MediaQueryData getMediaQueryData(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    return mediaQuery;
  }

  /// 仅支持纵屏。
  /// returns the size after adaptation according to the screen width.(unit dp or pt)
  /// 返回根据屏幕宽适配后尺寸（单位 dp or pt）
  /// size 单位 dp or pt
  static double getScaleW(BuildContext context, double size) {
    if (context == null || getScreenW(context) == 0.0) return size;
    return size * getScreenW(context) / _designW;
  }

  /// 仅支持纵屏。
  /// returns the size after adaptation according to the screen height.(unit dp or pt)
  /// 返回根据屏幕高适配后尺寸 （单位 dp or pt）
  /// size unit dp or pt
  static double getScaleH(BuildContext context, double size) {
    if (context == null || getScreenH(context) == 0.0) return size;
    return size * getScreenH(context) / _designH;
  }

  /// 仅支持纵屏。
  /// returns the font size after adaptation according to the screen density.
  /// 返回根据屏幕宽适配后字体尺寸
  /// fontSize 字体尺寸
  static double getScaleSp(BuildContext context, double fontSize) {
    if (context == null || getScreenW(context) == 0.0) return fontSize;
    return fontSize * getScreenW(context) / _designW;
  }

  /// Orientation
  /// 设备方向(portrait, landscape)
  static Orientation getOrientation(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    return mediaQuery.orientation;
  }

  /// 仅支持纵屏。
  /// returns the size after adaptation according to the screen width.(unit dp or pt)
  /// 返回根据屏幕宽适配后尺寸（单位 dp or pt）
  /// size 单位 dp or pt
  double getWidth(double size) {
    return _screenWidth == 0.0 ? size : (size * _screenWidth / _designW);
  }

  /// 仅支持纵屏。
  /// returns the size after adaptation according to the screen height.(unit dp or pt)
  /// 返回根据屏幕高适配后尺寸（单位 dp or pt）
  /// size unit dp or pt
  double getHeight(double size) {
    return _screenHeight == 0.0 ? size : (size * _screenHeight / _designH);
  }

  /// 仅支持纵屏
  /// returns the size after adaptation according to the screen width.(unit dp or pt)
  /// 返回根据屏幕宽适配后尺寸（单位 dp or pt）
  /// sizePx unit px
  double getWidthPx(double sizePx) {
    return _screenWidth == 0.0
        ? (sizePx / _designD)
        : (sizePx * _screenWidth / (_designW * _designD));
  }

  /// 仅支持纵屏。
  /// returns the size after adaptation according to the screen height.(unit dp or pt)
  /// 返回根据屏幕高适配后尺寸（单位 dp or pt）
  /// sizePx unit px
  double getHeightPx(double sizePx) {
    return _screenHeight == 0.0
        ? (sizePx / _designD)
        : (sizePx * _screenHeight / (_designH * _designD));
  }

  /// 仅支持纵屏。
  /// returns the font size after adaptation according to the screen density.
  /// 返回根据屏幕宽适配后字体尺寸
  /// fontSize 字体尺寸
  double getSp(double fontSize) {
    if (_screenDensity == 0.0) return fontSize;
    return fontSize * _screenWidth / _designW;
  }

  /// 兼容横/纵屏。
  /// 获取适配后的尺寸，兼容横/纵屏切换，可用于宽，高，字体尺寸适配。
  /// Get the appropriate size, compatible with horizontal/vertical screen switching, can be used for wide, high, font size adaptation.
  double getAdapterSize(double dp) {
    if (_screenWidth == 0 || _screenHeight == 0) return dp;
    return getRatio() * dp;
  }

  /// 适配比率。
  /// Ratio.
  double getRatio() {
    return (_screenWidth > _screenHeight ? _screenHeight : _screenWidth) /
        _designW;
  }

  /// 兼容横/纵屏。
  /// 获取适配后的尺寸，兼容横/纵屏切换，适应宽，高，字体尺寸。
  /// Get the appropriate size, compatible with horizontal/vertical screen switching, can be used for wide, high, font size adaptation.
  static double getAdapterSizeCtx(BuildContext context, double dp) {
    Size size = MediaQuery.of(context).size;
    if (size == Size.zero) return dp;
    return getRatioCtx(context) * dp;
  }

  /// 适配比率。
  /// Ratio.
  static double getRatioCtx(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return (size.width > size.height ? size.height : size.width) / _designW;
  }
}

在这里设置全局设置UI设计稿的尺寸：

///默认设计稿尺寸（单位 dp or pt）
double _designW = 375.0;
double _designH = 812.0;
double _designD = 2.0;

然后，配置自己的常用UI属性:

class UIDesign {
  ///************************字体*************************
  static double font_12 = ScreenUtil.getInstance().getSp(12);
  static double font_14 = ScreenUtil.getInstance().getSp(14);
  static double font_16 = ScreenUtil.getInstance().getSp(16);
  static double font_17 = ScreenUtil.getInstance().getSp(17);
  static double font_18 = ScreenUtil.getInstance().getSp(18);

  ///************************颜色*************************

  static Color cl_33 = Color(0xFF333333); //51
  static Color cl_66 = Color(0xFF666666); //102
  static Color cl_99 = Color(0xFF999999); //153
  static Color cl_C9 = Color(0xFFC9C9C9); //153
  static Color cl_db = Color(0xFFDBDBDB); //153
  static Color cl_white = Color(0xFFFFFFFF); //153
  static Color cl_D0 = Color(0xFFD0D0D0); //51

  static Color cl_6F3A10 = Color(0xFF6F3A10); //153
  static Color cl_9C6D24 = Color(0xFF9C6D24); //153
  static Color cl_CE9754 = Color(0xFFCE9754); //153
  static Color cl_D1B581 = Color(0xFFD1B581); //153

  static Color cl_FFFCF9 = Color(0xFFFFFCF9); //153
  static Color cl_EE4D4A = Color(0xFFEE4D4A); //153
  static Color cl_FF442A = Color(0xFFFF442A); //153
  static Color cl_008AFF = Color(0xFF008AFF); //153


  ///************************间距*************************

  static double dp1 = ScreenUtil.getInstance().getWidth(1);
  static double dp2 = ScreenUtil.getInstance().getWidth(2);
  static double dp3 = ScreenUtil.getInstance().getWidth(3);
  static double dp4 = ScreenUtil.getInstance().getWidth(4);
  static double dp5 = ScreenUtil.getInstance().getWidth(5);
  static double dp6 = ScreenUtil.getInstance().getWidth(6);

  ///************************文字风格*************************
  static TextStyle txStyle14_33 = TextStyle(
    fontSize: font_14,
    color: cl_33,
  );
  static TextStyle txStyle14_DBDBDB = TextStyle(
    fontSize: font_14,
    color: cl_db,
  );
  static TextStyle txStyle16_33 = TextStyle(
    fontSize: font_16,
    color: cl_33,
  );

  static TextStyle txStyle12_db = TextStyle(
    fontSize: font_12,
    color: cl_db,
  );
  static TextStyle txStyle12_c9 = TextStyle(
    fontSize: font_12,
    color: cl_C9,
  );
  static TextStyle txStyle12_66 = TextStyle(
    fontSize: font_12,
    color: cl_66,
  );
  static TextStyle txStyle14_66 = TextStyle(
    fontSize: font_14,
    color: cl_66,
  );

  ///************************padding*************************
  static EdgeInsets paddingTitleRightText =
      EdgeInsets.only(left:UIDesign.dp20,right: UIDesign.dp20);
  static EdgeInsets paddingV32 = EdgeInsets.only(bottom: dp32, top: dp32);
}

最后在需要使用的地方调用UIdesing.xxx替代就行了
例如设计稿上10pt或者10dp，直接用UIDesign.dp10.