flutter_screenutil插件如何使用来解决屏幕适配问题

在Flutter项目中使用flutter_screenutil插件时遇到了屏幕适配问题，具体该如何配置和使用？

初始化插件时，DesignSize应该如何设置？是根据设计稿的尺寸还是设备的实际尺寸？
在布局中使用ScreenUtil().setWidth()等方法时，是否需要为所有尺寸都手动适配？
如何处理不同设备的文字大小适配？是否有自动缩放方案？
遇到某些控件在部分设备上显示异常时，该如何排查和调整？
是否有更简洁的全局适配方案，而不是在每个组件中都单独调用适配方法？

bupafengyu 1楼

在pubspec.yaml添加依赖，初始化后使用ScreenUtil().setWidth/Height设置尺寸，.sp设置字体大小，自动适配不同屏幕。

更多关于flutter_screenutil插件如何使用来解决屏幕适配问题的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 2楼

Flutter ScreenUtil 是一个用于解决屏幕适配问题的插件，通过动态调整 UI 元素尺寸，确保在不同屏幕尺寸和分辨率下显示一致。以下是基本使用方法：

1. 安装插件

在 pubspec.yaml 中添加依赖：

dependencies:
  flutter_screenutil: ^5.9.0

运行 flutter pub get。

2. 初始化配置

在 main.dart 的 build 方法中初始化，通常包裹 MaterialApp：

import 'package:flutter_screenutil/flutter_screenutil.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(360, 690), // 设计稿尺寸（单位：逻辑像素）
      minTextAdapt: true, // 是否根据文本自适应
      splitScreenMode: true, // 支持分屏模式
      builder: (context, child) {
        return MaterialApp(
          home: child,
        );
      },
      child: const HomePage(),
    );
  }
}

3. 在 UI 中使用适配单位

尺寸适配：使用 .w 和 .h 替代固定数值

Container(
  width: 100.w,  // 根据屏幕宽度自适应
  height: 50.h,  // 根据屏幕高度自适应
  margin: EdgeInsets.all(10.r), // 使用 .r 进行圆角等适配
)

字体适配：使用 .sp 确保文字大小适配

Text(
  'Hello Flutter',
  style: TextStyle(fontSize: 16.sp),
)

响应式布局：结合 ScreenUtil 类方法

if (ScreenUtil().screenWidth > 600) {
  // 大屏布局
}

4. 注意事项

设计稿基准：designSize 需与 UI 设计稿尺寸一致（常见为 360x690 或 375x667）。
避免混用单位：统一使用 .w、.h、.sp，不要与固定像素混用。
横屏适配：通过 OrientationBuilder 结合 ScreenUtil 调整布局。

示例代码

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 300.w,
          height: 200.h,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(20.r),
          ),
          child: Text(
            '适配文本',
            style: TextStyle(fontSize: 18.sp),
          ),
        ),
      ),
    );
  }
}