当前位置：首页 > news >正文

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

news 来源：原创 2025/5/9 9:30:44

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

一、简单介绍

二、简单介绍 flutter_screenutil

三、安装 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 添加

dependencies:
  flutter_screenutil: ^5.9.3

四、简单案例实现

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

2、创建一个 application 的 Flutter 项目

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

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

五、关键代码

// 导入 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，并设置设计稿的尺寸。
    示例：

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