Flutter功能扩展插件flutter_ume

Flutter功能扩展插件flutter_ume_plus的使用

1. 简介

UME 是一个用于Flutter应用程序的内置调试工具平台。它提供了多种插件工具，帮助开发者在应用中进行调试、性能分析、设备信息查看等操作。UME 支持多个平台，包括 iOS、Android、Web、macOS、Windows 和 Linux。

2. 快速开始 (Quick Start)

2.1 添加依赖

编辑 pubspec.yaml 文件，添加 UME 及其相关插件的依赖。根据你使用的 Flutter 版本选择合适的版本号：

Flutter 3.x 及以上版本：

dev_dependencies:
  flutter_ume: ^1.0.1
  flutter_ume_kit_ui: ^1.0.0
  flutter_ume_kit_device: ^1.0.0
  flutter_ume_kit_perf: ^1.0.0
  flutter_ume_kit_show_code: ^1.0.0
  flutter_ume_kit_console: ^1.0.0
  flutter_ume_kit_dio: ^1.0.0

Flutter 2.x 及以上版本（Null Safety）：

dev_dependencies:
  flutter_ume: ^0.3.0+1
  flutter_ume_kit_ui: ^0.3.0+1
  flutter_ume_kit_device: ^0.3.0
  flutter_ume_kit_perf: ^0.3.0
  flutter_ume_kit_show_code: ^0.3.0
  flutter_ume_kit_console: ^0.3.0
  flutter_ume_kit_dio: ^0.3.0

Flutter 1.x 及以上版本（非 Null Safety）：

dev_dependencies:
  flutter_ume: ^0.1.1
  flutter_ume_kit_ui: ^0.1.1
  flutter_ume_kit_device: ^0.1.1
  flutter_ume_kit_perf: ^0.1.1
  flutter_ume_kit_show_code: ^0.1.1
  flutter_ume_kit_console: ^0.1.1

2.2 获取依赖

运行以下命令来获取依赖项：

flutter pub get

2.3 导入包

在你的 Dart 文件中导入 UME 及其插件：

import 'package:flutter_ume/flutter_ume.dart'; // UME 框架
import 'package:flutter_ume_kit_ui/flutter_ume_kit_ui.dart'; // UI 工具
import 'package:flutter_ume_kit_perf/flutter_ume_kit_perf.dart'; // 性能工具
import 'package:flutter_ume_kit_show_code/flutter_ume_kit_show_code.dart'; // 显示代码
import 'package:flutter_ume_kit_device/flutter_ume_kit_device.dart'; // 设备信息
import 'package:flutter_ume_kit_console/flutter_ume_kit_console.dart'; // 显示 debugPrint
import 'package:flutter_ume_kit_dio/flutter_ume_kit_dio.dart'; // Dio 调试

2.4 初始化 UME 并注册插件

编辑 main.dart 文件，在 main 方法中初始化 UME 并注册插件。确保只在调试模式下启用 UME：

import 'package:flutter/material.dart';
import 'package:dio/dio.dart'; // 如果你使用了 Dio

void main() {
  if (kDebugMode) {
    PluginManager.instance
      ..register(WidgetInfoInspector()) // 注册 Widget 信息插件
      ..register(WidgetDetailInspector()) // 注册 Widget 详细信息插件
      ..register(ColorSucker()) // 注册颜色吸取器
      ..register(AlignRuler()) // 注册对齐标尺
      ..register(ColorPicker()) // 注册颜色选择器
      ..register(TouchIndicator()) // 注册触摸指示器
      ..register(Performance()) // 注册性能监控
      ..register(ShowCode()) // 注册显示代码
      ..register(MemoryInfoPage()) // 注册内存信息
      ..register(CpuInfoPage()) // 注册 CPU 信息
      ..register(DeviceInfoPanel()) // 注册设备信息
      ..register(Console()) // 注册控制台
      ..register(DioInspector(dio: Dio())); // 注册 Dio 调试器

    runApp(UMEWidget(child: MyApp(), enable: true)); // 启用 UME
  } else {
    runApp(MyApp()); // 正常运行应用
  }
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

2.5 运行应用

使用以下命令运行应用：

flutter run

或者构建 APK 或 iOS 应用：

flutter build apk --debug
flutter build ios --debug

3. 重要注意事项 (IMPORTANT)

从 0.1.1 和 0.2.1 版本开始，不再需要设置 useRootNavigator: false。此部分仅适用于 0.1.1 和 0.2.1 之前的版本。

4. 功能 (Features)

UME 提供了 13 个内置插件工具，涵盖了 UI 调试、性能监控、设备信息、代码显示、控制台输出和 Dio 请求调试等功能。以下是部分插件的截图：

UI Kits	Performance Kits	Device Info Kits	Show Code	Console	Dio Inspector

5. 开发自定义插件 (Develop plugin kits for UME)

你可以创建自定义插件并集成到 UME 中。以下是开发自定义插件的步骤：

创建自定义插件项目：使用以下命令创建一个新的插件项目：
```
flutter create -t package custom_plugin
```
编辑 pubspec.yaml 文件：在自定义插件项目的 pubspec.yaml 文件中添加 UME 框架的依赖：
```
dependencies:
  flutter_ume: '>=0.3.0 <0.4.0'
```

创建插件类：创建一个实现 Pluggable 接口的类：

import 'package:flutter_ume/flutter_ume.dart';

class CustomPlugin implements Pluggable {
  CustomPlugin({Key key});

  [@override](/user/override)
  Widget buildWidget(BuildContext context) => Container(
    color: Colors.white,
    width: 100,
    height: 100,
    child: Center(
      child: Text('Custom Plugin'),
    ),
  ); // 插件面板

  [@override](/user/override)
  String get name => 'CustomPlugin'; // 插件名称

  [@override](/user/override)
  String get displayName => 'CustomPlugin';

  [@override](/user/override)
  void onTrigger() {} // 点击插件图标时调用

  [@override](/user/override)
  ImageProvider<Object> get iconImageProvider => NetworkImage('url'); // 插件图标
}

在主项目中使用自定义插件：

编辑主项目的 pubspec.yaml 文件，添加自定义插件的依赖：
```
dev_dependencies:
  custom_plugin:
    path: path/to/custom_plugin
```
运行 flutter pub get 来获取依赖。

导入自定义插件包：

import 'package:custom_plugin/custom_plugin.dart';

在 main.dart 中注册自定义插件：

if (kDebugMode) {
  PluginManager.instance
    ..register(CustomPlugin());
  runApp(
    UMEWidget(
      child: MyApp(),
      enable: true,
    ),
  );
} else {
  runApp(MyApp());
}

运行应用：使用 flutter run 命令运行应用。

6. 在 Release/Profile 模式下使用 UME

虽然可以在 Release/Profile 模式下使用 UME，但请注意以下风险：

VM Service 在这些环境中不可用，因此某些功能可能无法正常工作。
开发者需要自行隔离应用的分发渠道，以避免将调试代码提交到生产环境。

为了在 Release/Profile 模式下使用 UME，需要调整以下内容：

在 pubspec.yaml 中，将 flutter_ume 和插件依赖项写在 dependencies 下，而不是 dev_dependencies。
不要将调用 PluginManager.instance.register() 和 UMEWidget(child: App()) 的代码放在表示调试模式的条件语句中（例如 kDebugMode）。
确保上述调整后，运行 flutter clean 和 flutter pub get，然后构建应用。

7. 版本兼容性 (Compatibility)

UME 的不同版本与 Flutter 的兼容性如下表所示：

UME 版本	1.12.13	1.22.3	2.0.1	2.2.3	2.5.3	2.8.0	3.0.5	3.3.1
0.1.x	✅	✅	✅	✅	⚠️	⚠️	❌	❌
0.2.x	❌	❌	✅	✅	✅	⚠️	❌	❌
0.3.x	❌	❌	✅	✅	✅	✅	❌	❌
1.0.x	❌	❌	⚠️	⚠️	⚠️	⚠️	✅	✅
1.1.x	❌	❌	⚠️	⚠️	⚠️	⚠️	✅	✅

⚠️ 表示该版本尚未完全测试兼容性。

8. 其他

Null Safety：建议使用以下版本的 UME 和插件以确保 Null Safety：
- flutter_ume: ^0.3.0+1
- flutter_ume_kit_ui: ^0.3.0+1
- flutter_ume_kit_device: ^0.3.0
- flutter_ume_kit_perf: ^0.3.0
- flutter_ume_kit_show_code: ^0.3.0
- flutter_ume_kit_console: ^0.3.0
- flutter_ume_kit_dio: ^0.3.0
贡献者：感谢所有为 UME 做出贡献的开发者。
许可证：UME 项目遵循 MIT 许可证。

9. 完整示例 Demo

以下是一个完整的示例项目，展示了如何使用 flutter_ume 及其插件：

import 'package:flutter/material.dart';
import 'package:flutter_ume/flutter_ume.dart';
import 'package:flutter_ume_kit_ui/flutter_ume_kit_ui.dart';
import 'package:flutter_ume_kit_perf/flutter_ume_kit_perf.dart';
import 'package:flutter_ume_kit_show_code/flutter_ume_kit_show_code.dart';
import 'package:flutter_ume_kit_device/flutter_ume_kit_device.dart';
import 'package:flutter_ume_kit_console/flutter_ume_kit_console.dart';
import 'package:flutter_ume_kit_dio/flutter_ume_kit_dio.dart';
import 'package:dio/dio.dart';

void main() {
  if (kDebugMode) {
    PluginManager.instance
      ..register(WidgetInfoInspector())
      ..register(WidgetDetailInspector())
      ..register(ColorSucker())
      ..register(AlignRuler())
      ..register(ColorPicker())
      ..register(TouchIndicator())
      ..register(Performance())
      ..register(ShowCode())
      ..register(MemoryInfoPage())
      ..register(CpuInfoPage())
      ..register(DeviceInfoPanel())
      ..register(Console())
      ..register(DioInspector(dio: Dio()));

    runApp(UMEWidget(child: MyApp(), enable: true));
  } else {
    runApp(MyApp());
  }
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

更多关于Flutter功能扩展插件flutter_ume_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼•1 天前

更多关于Flutter功能扩展插件flutter_ume_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中集成和使用flutter_ume_plus插件的一个示例代码案例。flutter_ume_plus是一个用于功能扩展的Flutter插件，通常用于增强应用的功能，比如权限管理、应用内导航等。假设这个插件提供了一些基础功能，以下是如何在Flutter项目中使用它的示例。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加flutter_ume_plus的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_ume_plus: ^最新版本号  # 请替换为实际最新版本号

然后运行flutter pub get来获取依赖。

2. 导入插件

在你的Dart文件中导入flutter_ume_plus：

import 'package:flutter_ume_plus/flutter_ume_plus.dart';

3. 初始化插件

通常在应用的入口文件（如main.dart）中初始化插件：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化 flutter_ume_plus 插件
  await FlutterUmePlus.instance.init();

  runApp(MyApp());
}

4. 使用插件功能

假设flutter_ume_plus提供了权限请求的功能，下面是如何使用它：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await FlutterUmePlus.instance.init();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Ume Plus Demo'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              // 请求相机权限
              var status = await FlutterUmePlus.instance.requestPermission(PermissionType.camera);
              if (status == PermissionStatus.granted) {
                ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Camera permission granted')));
              } else {
                ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Camera permission denied')));
              }
            },
            child: Text('Request Camera Permission'),
          ),
        ),
      ),
    );
  }
}

5. 处理权限结果

上面的代码示例展示了如何请求相机权限，并处理权限请求的结果。FlutterUmePlus.instance.requestPermission方法返回一个Future<PermissionStatus>，你可以根据返回的状态进行相应处理。

注意

由于flutter_ume_plus是一个假设的插件，实际使用时请查阅官方文档或源代码以了解具体的API和功能。
权限类型（如PermissionType.camera）和状态（如PermissionStatus.granted）等枚举值可能有所不同，请根据实际插件文档进行调整。
初始化插件时，可能需要处理一些初始化参数或配置，具体请参见插件的官方文档。

这个示例代码提供了一个基本的框架，展示了如何在Flutter项目中集成和使用flutter_ume_plus插件。实际使用时，请根据插件的具体功能和API文档进行相应调整。