Flutter 不同设备适配

屏幕适配

引入flutter_screenutil插件

pubspec.yaml文件中引入：

dependencies:
  flutter_screenutil: ^0.5.3

作用及使用

解决不同分辨率，不同像素比屏幕适配问题

1. 参考网址：flutter_screenutil中文文档

2. 注意事项：在使用之前请设置好设计稿的宽度和高度，传入设计稿的宽度和高度(单位px) 一定在MaterialApp的home中的页面设置(即入口文件，只需设置一次),以保证在每次使用之前设置好了适配尺寸：

    //填入设计稿中设备的屏幕尺寸
    //默认 width : 1080px , height:1920px , allowFontScaling:false
    ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
   
    //假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) 
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
   
    //设置字体大小根据系统的“字体大小”辅助选项来进行缩放,默认为false
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);

3. 使用方式：

    // 入口页面中初始化
    @override
    Widget build(BuildContext context) {
        // 初始化设计稿配置尺寸
        ScreenUtil.instance =
            ScreenUtil(width: Constants.designWidth, height: Constants.designHeight)
          ..init(context);
        return Scaffold()
    }
   
    // 页面中使用
    import 'package:flutter_screenutil/flutter_screenutil.dart';
    // 宽度
    double w1 = ScreenUtil().setWidth(1);
    // 高度
    double h1  = ScreenUtil().setHeight(1);
    // 字体
    double sp20 = ScreenUtil().setSp(20);

欢迎加群讨论更多flutter相关问题(7天有效）如果失效，可加个人微信拉群