Flutter应用大小检测插件appsize的使用

Flutter应用大小检测插件appsize的使用

简介

AppSize 是一个 Flutter 插件，用于轻松实现响应式布局。它可以根据不同的屏幕尺寸自动调整 UI，使响应式设计变得简单。AppSize 提供了多种扩展方法，如 .h、.w、.dh、.dw 和 .sp，以便在不同设备和屏幕方向下灵活调整布局。

安装

要使用 AppSize，首先需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  ...
  appsize: ^1.1.0+2

然后运行 flutter pub get 来安装插件。

参数说明

• canvasWidth: Figma 画布的宽度，用于使 .sp 扩展方法按预期工作。
• .h: 根据应用大小返回计算后的高度。
• .w: 根据应用大小返回计算后的宽度。
• .dh: 根据设备返回计算后的高度。
• .dw: 根据设备返回计算后的宽度。
• .sp: 根据画布宽度返回计算后的“可调整像素”宽度。
• AppSizeUtil.orientation: 获取屏幕方向（纵向或横向）。
• AppSizeUtil.deviceType: 获取设备类型（手机或平板）。

使用示例

1. 导入必要的包

在 Dart 代码中添加以下导入语句：

import 'package:appsize/appsize.dart';

2. 包裹 MaterialApp 以启用 AppSize

将 MaterialApp 包裹在 AppSize 或 AppSize.child 中，以便在整个应用程序中使用 AppSize 的功能。

MaterialApp(
  builder: (context, child) => AppSize(
    builder: (context, orientation, deviceType) => child!,
  ),
);

或者使用更简洁的 AppSize.child：

MaterialApp(
  builder: (context, child) => AppSize.child(
    child: child!,
  ),
);

3. 使用扩展方法调整布局

• 高度和宽度：使用 .h 和 .w 根据应用大小调整高度和宽度。这些值会根据屏幕方向的变化而变化。

Container(
  width: 20.w,    // 占据应用宽度的 20%
  height: 30.h,   // 占据应用高度的 30%
)

• 设备高度和宽度：使用 .dh 和 .dw 根据设备大小调整高度和宽度。这些值不会随屏幕方向变化。

Container(
  width: 20.dw,    // 占据屏幕宽度的 20%
  height: 30.dh,   // 占据屏幕高度的 30%
)

• 字体大小：使用 .sp 根据画布宽度调整字体大小，确保在不同设备上保持一致的视觉效果。

Text(
  'AppSize',
  style: TextStyle(
    fontSize: 15.sp,
  ),
)

• 设备类型判断：使用 AppSizeUtil.deviceType 判断当前设备是手机还是平板，并根据设备类型显示不同的布局。

AppSizeUtil.deviceType == DeviceType.mobile
  ? Container(   // 手机布局
      width: 100.w,
      height: 20.5.h,
   )
  : Container(   // 平板布局
      width: 100.w,
      height: 12.5.h,
   )

4. 完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 AppSize 插件来创建响应式布局。

import 'package:appsize/appsize.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AppSize.child(
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'AppSize Demo',
        theme: ThemeData.light(),
        home: const HomeScreen(),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AppSize Demo'),
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(
          vertical: 20.dw,  // 使用 .dw 确保在所有设备上垂直间距一致
          horizontal: 10.dw,
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 80.w,    // 占据应用宽度的 80%
              height: 50.h,   // 占据应用高度的 50%
              color: Colors.blue,
              child: Center(
                child: Text(
                  'This is a responsive container',
                  style: TextStyle(
                    fontSize: 20.sp,  // 使用 .sp 确保字体大小在不同设备上一致
                    color: Colors.white,
                  ),
                ),
              ),
            ),
            SizedBox(height: 20.dh),  // 使用 .dh 确保在所有设备上间距一致
            Container(
              width: 60.dw,    // 占据屏幕宽度的 60%
              height: 30.dh,   // 占据屏幕高度的 30%
              color: Colors.green,
              child: Center(
                child: Text(
                  'This is another container',
                  style: TextStyle(
                    fontSize: 18.sp,
                    color: Colors.black,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}