flutter如何使用screenutils插件

在Flutter项目中引入screenutils插件后，如何正确使用它来适配不同屏幕尺寸？我在main.dart中初始化了ScreenUtil.init()，但在具体页面中调用ScreenUtil().setWidth(100)时效果不符合预期。请问具体的适配方案应该如何实现？是否需要配合MediaQuery一起使用？求详细的代码示例和最佳实践。

2 回复

在Flutter中使用screenutils插件，首先在pubspec.yaml中添加依赖，然后运行flutter pub get。在代码中导入包，调用ScreenUtil.init()初始化，使用ScreenUtil().setWidth()等方法适配不同屏幕尺寸。

更多关于flutter如何使用screenutils插件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用screenutil插件可以方便地进行屏幕适配，支持不同尺寸的设备。以下是基本使用方法：

1. 添加依赖

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_screenutil: ^5.9.0  # 使用最新版本

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. 使用适配方法

在Widget中通过扩展方法或 ScreenUtil 类进行尺寸和字体适配：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 100.w,    // 设计稿宽度的100单位（百分比）
          height: 50.h,    // 设计稿高度的50单位
          padding: EdgeInsets.all(10.r), // 适配圆角或边距
          child: Text(
            'Hello ScreenUtil',
            style: TextStyle(fontSize: 16.sp), // 字体适配
          ),
        ),
      ),
    );
  }
}

主要方法说明：

  • .w / .h：按设计稿比例适配宽高
  • .sp：字体大小适配（考虑系统字体缩放）
  • .r：适配圆角或边距（基于宽度或高度较小者）

注意事项：

  • 设计稿尺寸需根据UI设计图设置（如 Size(375, 812) 对应iPhone 13）
  • 建议使用扩展方法（如 100.w）简化代码
  • 对于需要精确控制的情况，可用 ScreenUtil().setWidth(100)

通过以上步骤即可快速实现Flutter应用的屏幕适配。

回到顶部