flutter_screenutil 教程

flutter_screenutil 教程

flutter_screenutilFlutter screen adaptation, font adaptation, get screen information项目地址:https://gitcode.com/gh_mirrors/fl/flutter_screenutil

1. 项目目录结构及介绍

flutter_screenutil 的源码组织如下：

flutter_screenutil/
├── lib/                    # 主要代码库
│   ├── screenutil.dart     # 核心功能类
│   └── ...                 # 其他相关文件
├── test/                   # 测试代码
│   └── screenutil_test.dart
├── example/                # 示例应用目录
│   ├── lib/                
│   │   └── main.dart       # 示例主入口文件
│   ├── android/            # Android 平台配置
│   ├── ios/                # iOS 平台配置
│   └── ...                 # 其他平台配置
├── .gitignore              # Git 忽略规则
├── CHANGELOG.md            # 更新日志
└── ...                     # 其他项目元数据文件

项目的核心功能集中在 lib 目录下的 screenutil.dart 文件，它提供了屏幕适配的功能。example 目录包含了一个演示如何使用这个库的小应用。

2. 项目启动文件介绍

示例应用的启动文件是 example/lib/main.dart。在这个文件中，你可以看到如何在 Flutter 应用中初始化并使用 flutter_screenutil。例如，通过以下方式设置全局屏幕适配：

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) {
    // 初始化屏幕适配参数
    ScreenUtil.instance = ScreenUtil.getInstance()
      ..init(context)
      ..designSize = Size(360, 690); // 设计图的基础尺寸

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter_ScreenUtil',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomePage(title: 'FlutterScreenUtil Demo'),
    );
  }
}

在上面的代码中，我们首先初始化 ScreenUtil 实例，并指定了设计图的标准尺寸。接着，我们将一个使用了 ScreenUtil 进行适配的 HomePage 设置为应用的主页。

3. 项目的配置文件介绍

项目没有单独的配置文件（如 config.yaml），但部分平台相关的配置文件对于应用在特定平台上的运行至关重要，例如：

• android/app/build.gradle 和 android/settings.gradle: 配置 Android 应用的构建和依赖。
• ios/Runner.xcworkspace: Xcode 工作空间，用于 iOS 开发。

此外，pubspec.yaml 文件包含了 Flutter 包的基本信息和依赖管理：

name: flutter_screenutil
description: A flutter plugin for adapting screen and font size.
version: 5.9.3
homepage: https://github.com/OpenFlutter/flutter_screenutil

environment:
  sdk: ">=2.14.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

在这里，可以看到 flutter_screenutil 的版本信息以及它的环境要求。为了使用这个库，你需要确保你的 Flutter SDK 版本在指定范围内。

flutter_screenutilFlutter screen adaptation, font adaptation, get screen information项目地址:https://gitcode.com/gh_mirrors/fl/flutter_screenutil