Flutter中flutter_screenutil屏幕适配方案

1、尺寸适配：允许你根据设计稿的尺寸来设置元素的宽度、高度、字体大小等，插件会自动根据当前设备屏幕的尺寸进行适配。

2、屏幕密度适配：自动适配不同的屏幕密度，提供更加清晰的字体和图像。

在你的代码中使用前，需要先进行初始化：


import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: Size(360, 690), // 设置设计稿的尺寸,单位dp
      builder: () => MaterialApp(
        title: 'Flutter ScreenUtil Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: HomePage(),
      ),
    );
  }
}

然后，在你的 UI 代码中，使用 ScreenUtil 类提供的方法设置尺寸和字体大小：


class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 初始化ScreenUtil
    ScreenUtil.init(context,
        designSize: Size(360, 690), allowFontScaling: false);

    return Scaffold(
      appBar: AppBar(
        title: Text(
          'ScreenUtil Demo',
          style: TextStyle(
            fontSize: 20.sp, // 使用 '.sp' 来设置字体大小
          ),
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'This is a text',
              style: TextStyle(
                fontSize: 24.sp, // 为文字大小使用 'sp'
              ),
            ),
            SizedBox(height: 12.h), // 在高度上使用 '.h'
            Container(
              width: 180.w, // 在宽度上使用 '.w'
              height: 200.h, // 在高度上使用 '.h'
              color: Colors.blue,
              child: Text(
                'This box will adapt to the screen width!',
                style: TextStyle(fontSize: 16.sp),
                textAlign: TextAlign.center,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在上面的代码示例中：

● ScreenUtil.init 方法设置了设计稿尺寸（设计时指定的屏幕尺寸）。这应该是你一开始就调用的，以便 ScreenUtil 可以使用这些信息进行适配。

● sp 单位用来确保文字大小在不同设备上看起来相同。它会考虑设备的文字缩放设置。

● w、h 单位用来按设计稿的尺寸进行宽度和高度的适配。

使用建议：

● 设计稿尺寸：在使用 ScreenUtilInit 初始化时设置的设计尺寸应该是 UI 设计师提供的原始设计稿的尺寸（通常以像素为单位）。这将确保在不同屏幕上的尺寸比例根据设计稿来适配。

● 布局时使用：布局构建时使用 .w、.h 做宽高适配，.sp 做不随系统字体缩放变化的字体大小适配。这样可以最大限度确保在不同屏幕尺寸的设备上，UI 组件保持相同的视觉比例。

● 测试不同设备：即使使用了 flutter_screenutil，也应该在各种屏幕尺寸和分辨率的设备上测试你的应用，确保布局看起来正确并且美观。

Flutter中flutter_screenutil屏幕适配方案

flutter_screenutil的作用：

在你的代码中使用前，需要先进行初始化：

然后，在你的 UI 代码中，使用 ScreenUtil 类提供的方法设置尺寸和字体大小：

在上面的代码示例中：

使用建议：