Flutter屏幕尺寸适配插件size_util的使用

在Flutter开发中，屏幕尺寸适配是一个非常重要的问题。size_util 是一个用于将设计稿（如 Figma）中的尺寸转换为 Flutter 应用实际尺寸的工具库。它可以帮助开发者快速实现跨设备的适配。

特性

• 扩展工具：提供了高度和字体大小的适配功能。
• 基于设计稿：可以根据设计稿中的尺寸动态调整应用界面。

使用方法

1. 添加依赖

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

dependencies:
  size_util: ^0.2.0

然后运行以下命令以更新依赖：

flutter pub get

2. 初始化插件

在应用启动时初始化 size_util。通常可以在 main.dart 中完成初始化：

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

void main() {
  // 初始化 size_util，传入设计稿的宽度和高度
  SizeUtil.init(widthDesign: 375, heightDesign: 812);
  
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

注意：

• 设计稿的宽度和高度通常是根据 Figma 文件中的基准尺寸设置的。
• 如果你的设计稿是基于 iPhone 6/7/8（375x812），可以直接使用默认值。

3. 使用适配工具

在需要适配的地方，使用 .u 扩展方法来获取适配后的尺寸。例如：

字体大小适配

Text(
  'Hello World',
  style: TextStyle(fontSize: 16.u), // 将设计稿中的 16px 转换为适配后的尺寸
)

宽度和高度适配

Container(
  width: 100.u, // 将设计稿中的 100px 转换为适配后的宽度
  height: 50.u, // 将设计稿中的 50px 转换为适配后的高度
  color: Colors.blue,
)

边距适配

Padding(
  padding: EdgeInsets.all(10.u), // 将设计稿中的 10px 转换为适配后的边距
  child: Text('Padding Example'),
)

4. 完整示例

以下是一个完整的示例代码，展示了如何使用 size_util 进行屏幕适配：

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

void main() {
  // 初始化 size_util，传入设计稿的宽度和高度
  SizeUtil.init(widthDesign: 375, heightDesign: 812);
  
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Size Util 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用适配后的字体大小
            Text(
              '字体大小适配',
              style: TextStyle(fontSize: 16.u),
            ),
            
            SizedBox(height: 20.u), // 垂直间距适配
            
            // 使用适配后的宽度和高度
            Container(
              width: 100.u,
              height: 50.u,
              color: Colors.blue,
            ),
            
            SizedBox(height: 20.u), // 垂直间距适配
            
            // 使用适配后的边距
            Padding(
              padding: EdgeInsets.all(10.u),
              child: Text('Padding 示例'),
            ),
          ],
        ),
      ),
    );
  }
}