【Flutter 必备插件】屏幕适配方案 flutter_screenutil

flutter 屏幕适配方案,用于调整屏幕和字体大小的 flutter 插件,让你的 UI 在不同尺寸的屏幕上都能显示合理的布局!

初始化设计稿尺寸

main.dart

less 复制代码
	@override
  Widget build(BuildContext context) {

    return ScreenUtilInit(
      designSize: const Size(375, 812), // 设计稿的尺寸
      minTextAdapt: true, // 文字适配,防止字体过小
      builder: (context, child) {
        return MaterialApp.router(
          routerConfig: AppRouter.router,
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFFFF9900)),
            useMaterial3: true,
          ),
        );
      }
    );
  }

在代码中使用适配单位

1. 基本单位

  • .w 根据屏幕宽度适配
  • .h 根据屏幕高度适配
  • .r 根据宽/高中较小者适配(常用于圆角)
less 复制代码
Container(
  width: 200.w,    // 相当于设计稿中 200 的宽度
  height: 100.h,   // 相当于设计稿中 100 的高度
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10.r), // 自适应圆角
  ),
);

2. 字体适配

  • .sp 根据屏幕宽度或高度自适应文本(推荐优先使用宽度)
less 复制代码
Text(
  'Hello ScreenUtil',
  style: TextStyle(fontSize: 24.sp),
);
  • 设置字体不随系统字体大小进行改变

    APP 全局:

less 复制代码
	@override
  Widget build(BuildContext context) {

    return ScreenUtilInit(
      designSize: const Size(375, 812), // 设计稿的尺寸
      minTextAdapt: true, // 文字适配,防止字体过小
      builder: (context, child) {
        return MaterialApp.router(
          routerConfig: AppRouter.router,
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFFFF9900)),
            useMaterial3: true,
          ),
          builder: (context, widget) {
            return MediaQuery(
            ///设置文字大小不随系统设置改变
            data: MediaQuery.of(context).copyWith(textScaler: TextScaler.linear(1.0)),
            child: widget!,
            );
          }
        );
      }
    );
  }

3. API

scss 复制代码
ScreenUtil().screenWidth;  // 屏幕宽度
ScreenUtil().screenHeight; // 屏幕高度
ScreenUtil().pixelRatio;   // 设备像素密度
ScreenUtil.bottomBarHeight  //底部安全区距离,适用于全面屏下面有按键的
ScreenUtil.statusBarHeight  //状态栏高度 刘海屏会更高
ScreenUtil.textScaleFactor //系统字体缩放比例

ScreenUtil().scaleWidth  // 实际宽度设计稿宽度的比例
ScreenUtil().scaleHeight // 实际高度与设计稿高度度的比例

ScreenUtil().orientation  //屏幕方向

0.2.sw  //屏幕宽度的0.2倍
0.5.sh  //屏幕高度的50%
20.setVerticalSpacing  // SizedBox(height: 20 * scaleHeight)
20.horizontalSpace  // SizedBox(height: 20 * scaleWidth)
const RPadding.all(8)   // Padding.all(8.r) - 获取到const的优点
EdgeInsets.all(10).w    //EdgeInsets.all(10.w)
REdgeInsets.all(8)       // EdgeInsets.all(8.r)
EdgeInsets.only(left:8,right:8).r // EdgeInsets.only(left:8.r,right:8.r).
BoxConstraints(maxWidth: 100, minHeight: 100).w    //BoxConstraints(maxWidth: 100.w, minHeight: 100.w)
Radius.circular(16).w          //Radius.circular(16.w)
BorderRadius.all(Radius.circular(16)).w  
相关推荐
猪哥帅过吴彦祖16 小时前
Flutter 系列教程:核心概念 - StatelessWidget vs. StatefulWidget
前端·javascript·flutter
GeniuswongAir1 天前
Flutter实现滑动页面停留吸附
前端·javascript·flutter
lar_slw1 天前
flutter json转实体类
android·flutter·json
恋猫de小郭2 天前
基于 Dart 的 Terminal UI ,pixel_prompt 这个 TUI 库了解下
android·前端·flutter
猪哥帅过吴彦祖2 天前
Flutter 系列教程:Dart 语言快速入门 (下)
前端·flutter·ios
zhifanxu2 天前
Flutter 中使用 Color 的最优方案
flutter
江上清风山间明月2 天前
flutter 编译报错java.util.zip.ZipException: zip END header not found
java·开发语言·flutter
科技林总2 天前
【TS5】Electron与Flutter
javascript·flutter·electron
这次选左边2 天前
Flutter混合Android开发Release 打包失败GeneratedPluginRegistrant.java,Plugin不存在
android·java·flutter
小蜜蜂嗡嗡2 天前
flutter在包含ListVIew的滚动列表页面中监听手势:NotificationListener
flutter