Flutter 学习之旅之 flutter 使用 flutter_screenutil 简单进行屏幕适配

[Flutter 学习之旅之 flutter 使用 flutter_screenutil 简单进行屏幕适配](#Flutter 学习之旅之 flutter 使用 flutter_screenutil 简单进行屏幕适配)

一、简单介绍

[二、简单介绍 flutter_screenutil](#二、简单介绍 flutter_screenutil)

[三、安装 carousel_slider](#三、安装 carousel_slider)

四、简单案例实现

五、关键代码

六、补充说明

一、简单介绍

Flutter 是一款开源的 UI 软件开发工具包，由 Google 开发和维护。它允许开发者使用一套代码同时构建跨平台的应用程序，包括移动设备（iOS 和 Android）、Web 和桌面平台（Windows、macOS 和 Linux）。

Flutter 使用 Dart 编程语言，它可以将代码编译为 ARM 或 Intel 机器代码以及 JavaScript，从而实现快速的性能。Flutter 提供了一个丰富的预置小部件库，开发者可以根据自己的需求灵活地控制每个像素，从而创建自定义的、适应性强的设计，这些设计在任何屏幕上都能呈现出色的外观和感觉。

二、简单介绍 flutter_screenutil

网址：flutter_screenutil | Flutter package

flutter_screenutil 是一个用于 Flutter 应用的屏幕适配插件。它通过设置设计稿的尺寸，自动计算屏幕缩放比例，从而实现宽度、高度和字体大小的自适应调整。使用 .w、.h 和 .sp 等单位，开发者可以轻松实现跨设备的布局适配，确保应用在不同屏幕尺寸和分辨率的设备上保持一致的显示效果。

中文文档地址：flutter_screenutil/README_CN.md at master · OpenFlutter/flutter_screenutil · GitHub

属性	类型	默认值	描述
designSize	Size	Size(360, 690)	设计稿中设备的尺寸(单位随意,建议dp,但在使用过程中必须保持一致)
deviceSize	Size	null	物理设备的大小
builder	Widget Function()	Container()	一般返回一个MaterialApp类型的Function()
orientation	Orientation	portrait	屏幕方向
splitScreenMode	bool	false	支持分屏尺寸
minTextAdapt	bool	false	是否根据宽度/高度中的最小值适配文字
context	BuildContext	null	传入context会更灵敏的根据屏幕变化而改变
child	Widget	null	builder的一部分，其依赖项属性不使用该库
rebuildFactor	Function	default	返回屏幕指标更改时是否重建。

注意：builder和child中必须填写至少一项

三、安装 carousel_slider

1、直接运行命令

使用 Flutter：flutter pub add flutter_screenutil

flutter_screenutil/README_CN.md at master · OpenFlutter/flutter_screenutil · GitHub

2、或者在 pubspec.yaml 添加

Dart 复制代码

dependencies:
  flutter_screenutil: ^5.9.3

四、简单案例实现

1、这里使用 Android Studio 进行创建 Flutter 项目

2、创建一个 application 的 Flutter 项目

3、编写代码，进行简单屏幕适配功能

4、连接设备，运行项目，简单效果如下

五、关键代码

Dart 复制代码

// 导入 Flutter 的基础组件库
import 'package:flutter/material.dart';
// 导入 flutter_screenutil 插件，用于屏幕适配
import 'package:flutter_screenutil/flutter_screenutil.dart';

// 主函数，程序的入口点
void main() {
  runApp(MyApp());
}

// 定义一个 StatelessWidget，作为应用的根组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 使用 ScreenUtilInit 包裹整个应用，初始化屏幕适配功能
    return ScreenUtilInit(
      // 设计稿的尺寸，根据设计稿的宽度和高度设置
      designSize: Size(375, 812), // 设计稿尺寸（例如 iPhone X 的尺寸）
      // 是否开启最小文本适配，确保文本在不同设备上保持可读性
      minTextAdapt: true,
      // builder 是一个函数，用于构建应用的根组件
      builder: (context, child) { // 注意这里的参数和返回值
        return MaterialApp(
          // 应用的标题，显示在任务栏或窗口标题中
          title: 'Flutter ScreenUtil Demo',
          // 定义应用的主题，设置主色调为蓝色
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          // 设置应用的默认颜色为黑色（可选）
          color: Colors.black,
          // 应用的首页，将 MyHomePage 作为 child 传入
          home: child,
        );
      },
      // 将主页组件 MyHomePage 作为 ScreenUtilInit 的子组件传入
      child: MyHomePage(), // 将主页作为 child 传入
    );
  }
}

// 定义主页组件
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 使用 Scaffold 构建页面结构
    return Scaffold(
      // 设置 Scaffold 的背景颜色为黑色
      backgroundColor: Colors.black,
      // 定义页面的顶部导航栏
      appBar: AppBar(
        // 设置 AppBar 的背景颜色为黑色
        backgroundColor: Colors.black,
        // 设置导航栏的标题
        title: Text(
          'Flutter ScreenUtil 示例',
          // 设置标题的文本颜色为白色
          style: TextStyle(color: Colors.white),
        ),
        // 将标题居中显示
        centerTitle: true,
      ),
      // 定义页面的主体内容
      body: Center(
        // 使用 Center 包裹子组件，确保子组件居中显示
        child: Container(
          // 设置容器的宽度，使用 ScreenUtil 的适配单位
          width: 300.w,
          // 设置容器的高度，使用 ScreenUtil 的适配单位
          height: 100.h,
          // 设置容器的背景颜色为蓝色
          color: Colors.blue,
          // 容器的子组件是一个 Text 文本
          child: Text(
            '适配后的容器',
            // 设置文本的字体大小，使用 ScreenUtil 的适配单位
            style: TextStyle(fontSize: 16.sp, color: Colors.white), // 字体颜色为白色
            // 设置文本居中对齐
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

代码说明：

导入库 ：代码开头导入了必要的库，包括 Flutter 的基础组件库和 flutter_screenutil 插件。

ScreenUtilInit ：这是 flutter_screenutil 的入口组件，用于初始化屏幕适配功能。designSize 设置了设计稿的尺寸，minTextAdapt 用于开启最小文本适配。

MaterialApp ：这是 Flutter 的一个基础组件，用于构建 Material Design 风格的应用。theme 设置了应用的主题，home 设置了应用的首页。

Scaffold ：这是 Flutter 中用于构建页面结构的组件，包含导航栏（AppBar）和页面主体（body）。

AppBar 和 Container ：分别用于设置导航栏和页面主体的样式。TextStyle 用于设置文本的样式，包括字体大小和颜色。

六、补充说明

使用 flutter_screenutil 的注意事项

正确初始化：

在使用 flutter_screenutil 之前，必须在应用的入口处（如 main.dart）初始化 ScreenUtilInit，并设置设计稿的尺寸。

示例：

Dart 复制代码

    return ScreenUtilInit(
      designSize: Size(375, 812), // 设计稿尺寸
      minTextAdapt: true, // 文本自适应优化
      builder: (_, child) => MaterialApp(home: child),
      child: MyHomePage(),
    );

选择合适的设计稿尺寸：

设计稿尺寸应与 UI 设计师提供的原始尺寸一致，通常以像素为单位。例如，移动端可选择 375×812（iPhone 13），平板可选择 768×1024。

适配单位的使用：

.w 和 .h 用于宽度和高度的适配。

.sp 用于字体大小的适配，会考虑系统字体缩放设置。

.ssp 和 .nsp 分别用于强制跟随系统字体缩放和禁用系统字体缩放。

适配圆形元素：

对于圆形或正方形元素，可以使用 .r 单位，它会根据宽高中的较小值进行适配。

安全区域处理：

使用 ScreenUtil().bottomBarHeight 和 ScreenUtil().statusBarHeight 来适配刘海屏和全面屏。

百分比布局：

可以使用 .sw 和 .sh 来设置屏幕宽度和高度的百分比，例如 0.5.sw 表示屏幕宽度的 50%。

横竖屏适配：

可以通过 ScreenUtilInit 的 orientation 参数强制设置横竖屏适配。

避免过度适配：

对于简单布局，建议使用 Flex 或 MediaQuery，而不是过度依赖 flutter_screenutil。

测试不同设备：

即使使用了 flutter_screenutil，仍需在不同屏幕尺寸和分辨率的设备上测试应用，确保布局的正确性和美观性。

性能优化：

全局只初始化一次 ScreenUtil，避免重复计算。

字体缩放策略：

如果需要禁用字体缩放，可以设置 allowFontScaling: false。

动态适配屏幕方向：

在屏幕方向变化时，可能需要重新初始化 ScreenUtil。

使用建议

全局初始化 ：推荐在 MaterialApp 外层包裹 ScreenUtilInit，并设置 minTextAdapt: true 以优化文本适配。

测试与验证 ：在编写测试时，确保使用 tester.pumpAndSettle() 等待布局稳定。
灵活使用 ：对于复杂布局或定制化设计，flutter_screenutil 可以确保元素大小更精确地反映设计意图。

常见问题及解决方法

图片模糊 ：使用 .r 单位保证宽高比。

布局溢出 ：结合 SingleChildScrollView 或其他滚动组件。
字体过大 ：设置 textScaleFactor: 1.0。
横竖屏切换异常 ：使用 OrientationBuilder 动态适配。

Flutter 学习之旅 之 flutter 使用 flutter_screenutil 简单进行屏幕适配