Flutter自适应设计工具插件adaptive_design_utils的使用

Adaptive Design Utils

adaptive_design_utils 是一个轻量级但功能强大的Flutter包，用于创建适应性和响应式应用。该包提供了一整套丰富的工具和小部件，帮助你构建在任何设备和屏幕尺寸上看起来都很棒的应用程序，并且无需外部依赖。

特性

1. 设备特定工具

• 自动检测设备类型（手机、平板、桌面）
• 平台特定的UI适配
• 暗模式检测
• 凹槽检测
• 安全区域处理
• 平台特定的动画和样式

2. 高级布局

• ResponsiveGrid 用于适应性网格布局
• ResponsiveMasonry 用于Pinterest风格的布局
• ResponsiveStaggeredGrid 用于动态网格布局
• AdaptiveContainer 用于响应式容器

3. 高级排版

• 响应式文本缩放
• Material 3 文本主题支持
• 自定义字体大小约束
• 适应性文本小部件

4. 屏幕工具

• 无依赖的响应式测量
• 适应性大小调整
• 屏幕尺寸分类
• 方向处理

5. 响应式扩展

• 快速简单的响应式大小调整
• 简化的小部件创建
• 跨设备一致的设计

// 响应式 SizedBox
20.height  // SizedBox(height: 20)
20.width   // SizedBox(width: 20)

// 响应式填充
Padding(padding: 10.p)   // 四周填充
Padding(padding: 10.ph)  // 水平填充
Padding(padding: 10.pv)  // 垂直填充

// 响应式字体大小
Text('Hello', style: TextStyle(fontSize: 16.sp))

6. 提示工具

• 响应式和可定制化的对话框
• 易于使用的Snackbar方法
• 一致的提示样式

// 对话框
Alert.showErrorDialog(
  context, 
  message: 'Something went wrong',
  onClose: () {
    // 可选关闭回调
  }
);

Alert.showSuccessDialog(
  context, 
  message: 'Operation completed successfully'
);

// 确认对话框
bool result = await Alert.showConfirmationDialog(
  context, 
  message: 'Do you want to proceed?'
);

// Snackbar
Alert.showErrorSnackBar(context, message: 'Error occurred');
Alert.showSuccessSnackBar(context, message: 'Success!');
Alert.showWarningSnackBar(context, message: 'Warning message');

7. 断点管理

• 预定义的断点
• 自定义断点创建
• 设备特定的布局

开始使用

在你的项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  adaptive_design_utils: ^0.0.4

使用

初始化

import 'package:adaptive_design_utils/adaptive_design_utils.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (context) {
          // 初始化包
          AdaptiveDesignUtils.initialize(context);
          return HomePage();
        },
      ),
    );
  }
}

响应式网格布局

ResponsiveGrid(
  children: [
    // 你的网格项目
  ],
  mobileCrossAxisCount: 1,
  tabletCrossAxisCount: 2,
  desktopCrossAxisCount: 4,
  spacing: 16.0,
  childAspectRatio: 1.0,
)

瀑布流布局

ResponsiveMasonry(
  children: [
    // 你的瀑布流项目
  ],
  mobileColumns: 1,
  tabletColumns: 2,
  desktopColumns: 3,
  spacing: 16.0,
)

适应性容器

AdaptiveContainer(
  child: YourWidget(),
  mobileWidth: double.infinity,
  tabletWidth: 680,
  desktopWidth: 1024,
  padding: EdgeInsets.all(16),
  backgroundColor: Colors.white,
  borderRadius: 8.0,
)

屏幕工具

// 获取适应性测量
double width = ScreenUtils.adaptiveWidth(100);
double height = ScreenUtils.adaptiveHeight(50);
double fontSize = ScreenUtils.adaptiveFontSize(16);

// 获取屏幕信息
double screenWidth = ScreenUtils.screenWidth;
double screenHeight = ScreenUtils.screenHeight;
bool isLandscape = ScreenUtils.isLandscape;

设备工具

// 检测设备类型
final deviceType = await DeviceUtils.getDeviceType();

// 检测暗模式
final isDark = DeviceUtils.isDarkMode(context);

// 获取平台特定的样式
final cornerRadius = DeviceUtils.getPlatformRadius();
final animationDuration = DeviceUtils.getPlatformDuration();

高级排版

// 使用预定义样式
Text(
  'Headline',
  style: AdaptiveTypography.headline1(context),
)

// 使用适应性文本小部件
AdaptiveText(
  'Responsive Text',
  style: TextStyle(fontSize: 20),
  minFontSize: 14,
  maxFontSize: 24,
)