Flutter响应式布局辅助插件fl_responsive_guide的使用

插件简介

fl_responsive_guide 是一个用于 Flutter 应用程序的响应式布局辅助插件。通过该插件，开发者可以轻松实现跨设备的响应式设计。以下是插件的一些基本信息：

Star on GitHub

License

基本概念

为了更好地理解响应式布局，我们需要回顾 Material Design 提供的一些关键概念，例如：

Layout Anatomy

Material Design 的布局解剖学定义了以下元素：

• AppBar: 应用程序顶部的导航栏。
• Device Breakpoints: 不同屏幕尺寸的断点。
• Navigation Region: 导航区域。
• Columns, Gutters, Margins: 列、间距和边距。

这些概念帮助我们理解如何在不同设备上构建一致的用户界面。

ResponsiveGuide 类

ResponsiveGuide 是一个 InheritedWidget，允许其子级小部件接收有关当前布局配置的信息。它基于 FlDesignConfig 进行配置。

FlDesignConfig 属性

以下是一些常用的属性：

final FlSize margin; // 用于设置主体的外边距
final FlSize body; // 用于设置主体宽度
final int layoutColumns; // 设置主体列的数量
final double gutters; // 设置列之间的间距
final DeviceTarget deviceTarget; // 配置目标设备类型
final double? navigationRailWidth;
final double appbarHeight;
final double drawerWidth;
final double tabBarHeight;

FlSize 类

FlSize 允许我们根据屏幕尺寸动态调整大小。有两种主要实现：

1. FlSize.size(double size): 固定大小。
2. FlSize.scale(): 自动缩放。

示例代码

abstract class FlSize {
  FlSize();

  factory FlSize.size(double size) {
    return FlSizeNumber(size);
  }

  factory FlSize.scale() {
    return FlSizeScale();
  }
}

class FlSizeNumber extends FlSize {
  final double number;

  FlSizeNumber(this.number);
}

class FlSizeScale extends FlSize {}

使用方法

1. 定义断点系统

首先，我们需要为应用程序定义不同的断点系统。Material Design 提供了一个通用的断点表：

示例代码

breakpointSystems: {
  600: FlDesignConfig(
      body: FlSize.scale(),
      margin: FlSize.size(0),
      appbarHeight: 56,
      deviceTarget: DeviceTarget.mobile),
  900: FlDesignConfig(
      body: FlSize.scale(),
      margin: FlSize.size(0),
      gutters: 12,
      appbarHeight: 56,
      deviceTarget: DeviceTarget.tablet),
  double.maxFinite: FlDesignConfig(
      body: FlSize.size(621),
      margin: FlSize.scale(),
      gutters: 24,
      appbarHeight: 80,
      deviceTarget: DeviceTarget.desktop)
}

2. 创建响应式包装器小部件

接下来，我们需要创建一个包装器小部件来支持响应式布局。这包括两个部分：

1. ResponsiveGuideWrapper: 提供当前断点信息。
2. ResponsiveGuideConsumerWidget: 消费者小部件，用于获取当前断点信息并渲染相应的 UI。

示例代码

Widget build(BuildContext context) {
  return ResponsiveGuideWrapper(
    breakpointSystems: {
      600: FlDesignConfig(
          body: FlSize.scale(),
          margin: FlSize.size(0),
          appbarHeight: 56,
          deviceTarget: DeviceTarget.mobile),
      900: FlDesignConfig(
          body: FlSize.scale(),
          margin: FlSize.size(0),
          gutters: 12,
          appbarHeight: 56,
          deviceTarget: DeviceTarget.tablet),
      double.maxFinite: FlDesignConfig(
          body: FlSize.size(621),
          margin: FlSize.scale(),
          gutters: 12,
          appbarHeight: 56,
          deviceTarget: DeviceTarget.desktop)
    },
    child: Application(),
  );
}

3. 使用消费者小部件

最后，我们可以在应用中使用 ResponsiveGuideConsumerWidget 来根据当前断点渲染不同的 UI。

示例代码

body: ResponsiveGuideConsumerWidget(
  builder: (context, designInfo) {
    switch (designInfo.deviceTarget) {
      case DeviceTarget.mobile:
        return Center(
          child: Text('Mobile App'),
        );
      case DeviceTarget.tablet:
        return Center(
          child: Text('Tablet App'),
        );
      case DeviceTarget.desktop:
        return Center(
          child: Text('Desktop App'),
        );
    }
  },
)

完整示例

以下是一个完整的示例代码，展示了如何使用 fl_responsive_guide 实现响应式布局。

import 'package:fl_responsive_guide/data/fl_design_config.dart';
import 'package:fl_responsive_guide/data/fl_device_target.dart';
import 'package:fl_responsive_guide/data/fl_size.dart';
import 'package:fl_responsive_guide/ui/responsive_guide_widget.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ResponsiveGuideWrapper(
      breakpointSystems: {
        600: FlDesignConfig(
            body: FlSize.scale(),
            margin: FlSize.size(0),
            appbarHeight: 56,
            deviceTarget: DeviceTarget.mobile),
        900: FlDesignConfig(
            body: FlSize.scale(),
            margin: FlSize.size(0),
            gutters: 12,
            appbarHeight: 56,
            deviceTarget: DeviceTarget.tablet),
        double.maxFinite: FlDesignConfig(
            body: FlSize.size(621),
            margin: FlSize.scale(),
            gutters: 12,
            appbarHeight: 56,
            deviceTarget: DeviceTarget.desktop)
      },
      child: Application(),
    );
  }
}

class Application extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Responsive App')),
      body: ResponsiveGuideConsumerWidget(
        builder: (context, designInfo) {
          switch (designInfo.deviceTarget) {
            case DeviceTarget.mobile:
              return Center(child: Text('Mobile App'));
            case DeviceTarget.tablet:
              return Center(child: Text('Tablet App'));
            case DeviceTarget.desktop:
              return Center(child: Text('Desktop App'));
          }
        },
      ),
    );
  }
}