flutter_ume

UME 是一个 Flutter 的应用内调试工具包平台。由字节跳动 Flutter Infra 团队出品

UME 是 Flutter 应用的内置调试工具集平台。

UME 当前开源版本内置了 10 个插件工具集。
开发者可以创建自定义插件工具集，并将其集成到 UME 中。
请访问 为 UME 开发插件工具集 以了解更多详情。

快速入门

  1. 编辑 pubspec.yaml，然后添加依赖项。

    dev_dependencies: # Don't use UME in release mode
  flutter_ume: ^0.1.0
  flutter_ume_kit_ui: ^0.1.0
  flutter_ume_kit_device: ^0.1.0
  flutter_ume_kit_perf: ^0.1.0
  flutter_ume_kit_show_code: ^0.1.0
  flutter_ume_kit_console: ^0.1.0

  2. 运行 flutter pub get

  3. 导入包

    import 'package:flutter_ume/flutter_ume.dart'; // UME framework
import 'package:flutter_ume_kit_ui/flutter_ume_kit_ui.dart'; // UI kits
import 'package:flutter_ume_kit_perf/flutter_ume_kit_perf.dart'; // Performance kits
import 'package:flutter_ume_kit_show_code/flutter_ume_kit_show_code.dart'; // Show Code
import 'package:flutter_ume_kit_device/flutter_ume_kit_device.dart'; // Device info
import 'package:flutter_ume_kit_console/flutter_ume_kit_console.dart'; // Show debugPrint

  4. 编辑您应用的 main 方法，注册插件工具集并初始化 UME

    void main() {
  if (kDebugMode) {
    PluginManager.instance                                 // Register plugin kits
      ..register(WidgetInfoInspector())
      ..register(WidgetDetailInspector())
      ..register(ColorSucker())
      ..register(AlignRuler())
      ..register(Performance())
      ..register(ShowCode())
      ..register(MemoryInfoPage())
      ..register(CpuInfoPage())
      ..register(DeviceInfoPanel())
      ..register(Console());
    runApp(injectUMEWidget(child: MyApp(), enable: true)); // Initial UME
  } else {
    runApp(MyApp());
  }
}

  5. flutter run 进行运行
    或 flutter build apk --debug、flutter build ios --debug 进行生产构建。

部分功能依赖于 VM Service，本地运行时需要添加额外的参数以确保能够连接到 VM Service。

在真机上运行 Flutter 2.0.x、2.2.x 等版本时，flutter run 需要添加 --disable-dds 参数。
在 Pull Request #80900 合并后，--disable-dds 已被重命名为 --no-dds。

重要提示

由于 UME 在顶层管理路由堆栈，因此 showDialog 等方法默认使用 rootNavigator 来弹出，
因此在 showDialog、showGeneralDialog 等“显示对话框”方法中必须传递参数 useRootNavigator: false，以避免导航器错误。

showDialog(
  context: context,
  builder: (ctx) => AlertDialog(
        title: const Text('Dialog'),
        actions: <Widget>[
          TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('OK'))
        ],
      ),
  useRootNavigator: false); // <===== It's very IMPORTANT!

功能

UME 当前开源版本内置了 10 个插件工具集。

Widget Info
Widget 信息		 Widget Detail
Widget 详情		 Color Sucker
颜色吸管
Align Ruler
对齐标尺		 Perf Overlay
性能覆盖		 Show Code
显示代码
Console
控制台		 Memory Info
内存信息		 CPU Info
CPU 信息
Device Info
设备信息

为 UME 开发插件工具集

在本章中，您可以参考 ./custom_plugin_example 中的示例。

  1. 运行 flutter create -t package custom_plugin 来创建您的自定义插件工具集，它可以是 package 或 plugin。

  2. 编辑自定义插件工具集的 pubspec.yaml 以添加 UME 框架依赖。

    dependencies:
  flutter_ume: '>=0.1.0 <0.2.0'

  3. 创建插件工具集类，该类应实现 Pluggable。

    import 'package:flutter_ume/flutter_ume.dart';

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

  @override
  Widget buildWidget(BuildContext context) => Container(
    color: Colors.white
    width: 100,
    height: 100,
    child: Center(
      child: Text('Custom Plugin')
    ),
  ); // The panel of the plugin kit

  @override
  String get name => 'CustomPlugin'; // The name of the plugin kit

  @override
  String get displayName => 'CustomPlugin';

  @override
  void onTrigger() {} // Call when tap the icon of plugin kit

  @override
  ImageProvider<Object> get iconImageProvider => NetworkImage('url'); // The icon image of the plugin kit
}

  4. 在项目中使用的自定义插件工具集

    1. 编辑宿主应用项目的 pubspec.yaml 以添加 custom_plugin 依赖。

      dev_dependencies:
  custom_plugin:
    path: path/to/custom_plugin

    2. 运行 flutter pub get

    3. 导入包

      import 'package:custom_plugin/custom_plugin.dart';

  5. 编辑您应用的 main 方法，注册您的 custom_plugin 插件工具集

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

  6. 运行您的应用

GitHub

https://github.com/bytedance/flutter_ume