Flutter自适应设计插件adaptive_design的使用

Flutter自适应设计插件adaptive_design的使用

Adaptive Design 是一个简化创建响应式和自适应用户界面的Flutter包。它结合了现有响应式包的优点，并解决了它们的局限性，为开发人员提供了易于使用的API。

特性

• 响应式尺寸：根据屏幕大小缩放小部件和字体。
• 断点管理：处理移动设备、平板电脑和桌面的不同布局。
• 设备和方向检测：访问设备类型和方向信息。
• 自适应小部件：构建适应不同屏幕尺寸的小部件。
• 响应式文本：自动调整不同设备上的文本大小。
• 可定制：设置自定义基准尺寸和断点。

安装

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

dependencies:
  adaptive_design: ^1.0.0

或者从Git仓库安装：

dependencies:
  adaptive_design:
    git:
      url: https://github.com/loqmanali/adaptive_design.git
      ref: main

然后运行：

flutter pub get

开始使用

1. 初始化

在你的 main.dart 文件中包裹你的应用：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  
  @override
  Widget build(BuildContext context) {
    return AdaptiveDesignProvider(
      context: context,
      mobileBreakpoint: 600,
      tabletBreakpoint: 900,
      child: const MaterialApp(
        title: 'Adaptive Design Demo',
        home: HomePage(),
      ),
    );
  }
}

2. 访问响应式工具

使用 AdaptiveDesignProvider.of(context) 来访问响应式工具：

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

class HomePage extends StatelessWidget {
  const HomePage({super.key});
  
  @override
  Widget build(BuildContext context) {
    final adaptiveDesign = AdaptiveDesignProvider.of(context);
    final size = adaptiveDesign.size;
    final deviceInfo = adaptiveDesign.deviceInfo;

    return Scaffold(
      appBar: AppBar(
        title: const ResponsiveText('Adaptive Design Demo'),
      ),
      body: Column(
        children: [
          Center(
            child: Container(
              width: size.scaleWidth(150),
              height: size.scaleHeight(100),
              color: Colors.blue,
              child: Center(
                child: ResponsiveText(
                  'This is a responsive container ${deviceInfo.isAndroid}',
                  style: const TextStyle(color: Colors.white),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
          ),
          const AdaptiveLayoutExample(),
          const SizedBox(height: 20),
          ResponsiveText(
            'This is a responsive text ${adaptiveDesign.breakpointManager.mobileBreakpoint}',
          ),
          ResponsiveText('${size.scaleHeight(100)}'),
          ResponsiveText('${size.scaleWidth(100)}'),
          ResponsiveText('${size.scaleFont(100)}'),
          ResponsiveText('${size.wp(100)}'),
          ResponsiveText('${size.hp(100)}').paddingAllR(10),
          const SizedBox().heightR(10),
          const SizedBox().widthR(10),
          const SizedBox().sizeR(10, 10),
          ResponsiveText('${size.hp(100)}').paddingAllR(10),
        ],
      ),
    );
  }
}

3. 使用自适应小部件

AdaptiveContainer

基于设备类型构建不同的布局：

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

  @override
  Widget build(BuildContext context) {
    return AdaptiveContainer(
      mobileBuilder: (_) => const MobileLayout(),
      tabletBuilder: (_) => const TabletLayout(),
      desktopBuilder: (_) => const DesktopLayout(),
    );
  }
}

ResponsiveText

使用 ResponsiveText 构建响应式文本：

ResponsiveText(
  'Your text here',
  style: TextStyle(fontSize: 16),
  textAlign: TextAlign.center,
);

自定义

基准尺寸

设置自定义基准宽度和高度：

AdaptiveDesignProvider(
  context: context,
  baseWidth: 360.0,
  baseHeight: 640.0,
  child: const MyApp(),
);

断点

设置自定义断点：

AdaptiveDesignProvider(
  context: context,
  mobileBreakpoint: 480.0,
  tabletBreakpoint: 800.0,
  child: const MyApp(),
);

API 参考

AdaptiveDesignProvider

属性：

• size: 提供响应式尺寸方法。
• breakpointManager: 管理断点和设备类型。
• deviceInfo: 提供设备和方向信息。

ResponsiveSize

方法：

• wp(double percentage): 屏幕宽度的百分比。
• hp(double percentage): 屏幕高度的百分比。
• scaleWidth(double size): 基于基准宽度的缩放宽度。
• scaleHeight(double size): 基于基准高度的缩放高度。
• scaleFont(double size): 缩放后的字体大小。

BreakpointManager

属性：

• deviceType: 返回 DeviceType.mobile, DeviceType.tablet, 或 DeviceType.desktop。

DeviceInfo

属性：

• orientation: 返回 Orientation.portrait 或 Orientation.landscape。
• isPortrait: 如果是纵向模式返回 true。
• isLandscape: 如果是横向模式返回 true。
• isIOS: 如果平台是iOS则返回 true。
• isAndroid: 如果平台是Android则返回 true。

示例

响应式按钮

ElevatedButton(
  onPressed: () {},
  child: ResponsiveText(
    'Click Me',
    style: TextStyle(fontSize: 18),
  ),
  style: ButtonStyle(
    padding: MaterialStateProperty.all(
      EdgeInsets.symmetric(
        horizontal: AdaptiveDesignProvider.of(context).size.scaleWidth(20),
        vertical: AdaptiveDesignProvider.of(context).size.scaleHeight(12),
      ),
    ),
  ),
);

响应式网格

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

class ResponsiveGridExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final deviceType = AdaptiveDesignProvider.of(context).breakpointManager.deviceType;
    int crossAxisCount = deviceType == DeviceType.mobile
        ? 2
        : deviceType == DeviceType.tablet
            ? 4
            : 6;

    return GridView.count(
      crossAxisCount: crossAxisCount,
      children: List.generate(20, (index) {
        return Card(
          child: Center(
            child: ResponsiveText('Item $index'),
          ),
        );
      }),
    );
  }
}

扩展

响应式上下文扩展

访问响应式尺寸方法：

final size = context.responsiveSize;

响应式边距

创建响应式的边距：

EdgeInsets padding = EdgeInsets.allR(context, 16);

响应式圆角

创建响应式的圆角：

BorderRadius radius = BorderRadius.circularR(context, 10);

响应式SizedBox扩展

创建响应式的SizedBox：

SizedBox box = SizedBox.widthR(context, 100);

响应式数字扩展

使用以下方法来响应式地缩放尺寸：

double width = 100.ws; // 缩放宽度
double height = 50.hs; // 缩放高度
double fontSize = 16.sp; // 缩放字体大小
double percentageWidth = 5.wp;