Flutter插件:flutter_screenutil 屏幕适配

转载备注:最好封装后使用

import 'package:flutter_screenutil/flutter_screenutil.dart';

/// 直接通过`类名称`访问里面的方法，方法为 静态方法
class ScreenAdaper {
  static init(context){
    ScreenUtil.init(context,data-width: 750, data-height: 1334, allowFontScaling: true);  //flutter_screenuitl >= 1.2
  }
  static sp(double value){
    return ScreenUtil().setSp(value, allowFontScalingSelf: true);  /// 获取 计算后的字体
  }
  static height(double value){
    return  ScreenUtil().setHeight(value);  /// 获取 计算后的高度
  }
  static width(double value){
    return ScreenUtil().setWidth(value);    /// 获取 计算后的宽度
  }
  static screenHeight(){
    return  ScreenUtil.screenHeight;  /// 获取 计算后的屏幕高度
  }
  static screenWidth(){
    return  ScreenUtil.screenWidth;  /// 获取 计算后的屏幕高度
  }
}

原文:
适配是移动开发最重要的一点之一，有了适配，应用才能在屏幕多元元元元...化的环境里占据一席之地。

 本节将介绍一下屏幕适配 flutter_screenutil。
 packages链接：flutter_screenutil

导入

 项目中使用flutter_screenutil，需要在项目目录中的pubspec.yaml文件中的dependencies里导入package。

dependencies:
   # 最新的版本，版本会迭代，需保持最新的
   flutter_screenutil: ^0.5.1

 导入后，运行flutter packages get获取刚才添加好的flutter_screenutil。

使用

 使用时需要根据设计稿的尺寸初始化一下，具体实现看下方。

...
  // 作者建议在第一次 build 的时候就进行初始化，这样接下来就可以放心使用了。
  @override
  Widget build(BuildContext context) {
    // 方式一：默认设置宽度1080px，高度1920px 
    ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
    // 方式二：设置宽度750px，高度1334px
    ScreenUtil.instance = ScreenUtil(data-width: 750, data-height: 1334)..init(context);
    // 方式三：设置宽度750px，高度1334px，根据系统字体进行缩放
    ScreenUtil.instance = ScreenUtil(data-width: 750, data-height: 1334, allowFontScaling: true)..init(context);
    ...
}
...

 初始化后就能进行配置了，比如配置宽度和高度。

Container(
  data-width:ScreenUtil().setWidth(100)
  data-height:ScreenUtil().setHeight(80)
  ....
}

 或者设置一下字体大小。

// 不跟随系统字体变化
Text(
  `24px fontsize text`,
  style: TextStyle(
    ...
    fontSize: ScreenUtil.getInstance().setSp(24),
  )
）
// 跟随系统字体变化
Text(
  `24px fontsize text`,
  style: TextStyle(
    ...
    fontSize: ScreenUtil(allowFontScaling: true).setSp(24),
  )
）

拓展

 长方形和正方形

// 长方形
Container(
  data-width:ScreenUtil().setWidth(350)
  data-height:ScreenUtil().setHeight(200)
  ....
)
// 正方形   这里注意都是 setWidth
Container(
  data-width:ScreenUtil().setWidth(100)
  data-height:ScreenUtil().setWidth(100)
  ....
)