Flutter 手机屏幕字体适配新控件sizer

最近开发中发现一个新的控件plugin：sizer，对于适配手机和平板屏幕和字体有很达帮助，废话不多说，直接上图。

**未使用此控件：请看下图 **

**使用此控件适配后，请看下图 **

大家可以看到适配后做到了屏幕和字体的适配，如果做到的呢？

1. 下载：

在pubspec.yaml 文件里加入

dependencies:
  ...
  sizer: ^2.0.15

2. 控件都有哪些参数：

• .h - 返回屏幕高的百分比 例如 .20h 就是屏幕高度的百分之二十.
• .w - 返回屏幕高的百分比 例如 .20w 就是屏幕宽度的百分之二十.
• .sp - 根据屏幕的大小获取 对应设备所显示的字体大小适配不同手机屏幕显示字体的大小
• SizerUtil.orientation -获取屏幕的横屏还是竖屏
• SizerUtil.deviceType - 获取当前设备是手机还是电脑

3. 如何使用

1. 首先在 .dart 文件中引入

import 'package:sizer/sizer.dart';

2. 使用 Sizer 包裹 MaterialApp

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Sizer(
      builder: (context, orientation, deviceType) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Sizer',
          theme: ThemeData.light(),
          home: HomeScreen() ,
        );
      },
    );
  }
}

3. 在任何页面想要使用sizer 还是要先导入 （暂时还不支持自动导入）

import 'package:sizer/sizer.dart';

4. 一些例子

Container(
      width: 20.w,    //取屏幕宽的百分之20
      height:30.h     //取屏幕高的百分之30
    )

/// Padding 横项 - 屏幕高的百分之3 和 竖项 - 屏幕高的百分之5
Padding(
      padding: EdgeInsets.symmetric(vertical: 5.h, horizontal: 3.h),
      child: Container(),
    );

 /// 根据手机屏幕的大小 15.sp 会生成手机所需要的尺寸字体
 Text(
      'Sizer',style: TextStyle(fontSize: 15.sp),
    );

print("使用sizer值并且在手机上打印数据：");
print(20.h);
print(10.w);
print(10.sp);

I/flutter (13030): 获取结果：荣耀9i
I/flutter (13030): 143.33333333333331
I/flutter (13030): 36.0
I/flutter (13030): 12.0

个人觉得很实用，如果你也感兴趣，请尝试一下。

官方网址：

pub.dev/packages/si…

努力💪 干就完了哈哈