flutter_ume 0.2.1
flutter_ume: ^0.2.1 copied to clipboard

UME is an in-app debug kits platform for Flutter apps. Produced by Flutter Infra team of ByteDance.

flutter_ume #

English

banner

Flutter 应用内调试工具平台

当前版本内置 10 个插件, 开发者可以创建自己的插件,并集成进 UME 平台。 详见本文为 UME 开发插件部分。

快速接入 #

  1. 修改 pubspec.yaml,添加依赖

     dev_dependencies: # 请不要在 release 环境下使用 UME
       flutter_ume: ^0.1.1  # null-safety 版本: ^0.2.1
       flutter_ume_kit_ui: ^0.1.1  # null-safety 版本: ^0.2.1
       flutter_ume_kit_device: ^0.1.1  # null-safety 版本: ^0.2.1
       flutter_ume_kit_perf: ^0.1.1  # null-safety 版本: ^0.2.1
       flutter_ume_kit_show_code: ^0.1.1  # null-safety 版本: ^0.2.1
       flutter_ume_kit_console: ^0.1.1  # null-safety 版本: ^0.2.1
    
  2. 执行 flutter pub get

  3. 引入包

     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 插件包
    
  4. 修改程序入口,增加初始化方法及注册插件代码

     void main() {
       if (kDebugMode) {
         PluginManager.instance                                 // 注册插件
           ..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)); // 初始化
       } else {
         runApp(MyApp());
       }
     }
    
  5. flutter run 运行代码 或 flutter build apk --debugflutter 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

特别说明 #

0.1.1/0.2.1 版本起,已经不需要设置 useRootNavigator: false 以下部分仅适用于 0.1.1/0.2.1 之前的版本。

由于 UME 在顶层管理了路由栈,showDialog 等方法默认使用 rootNavigator 弹出, 所以必须showDialogshowGeneralDialog 等弹窗方法,传入参数 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); // <===== 非常重要

功能介绍 #

当前开源版 UME 内置了 10 个插件

Widget 信息
Widget 信息
Widget 详情
Widget 详情
颜色吸管
颜色吸管
对齐标尺
对齐标尺
性能浮层
性能浮层
代码查看
代码查看
日志展示
日志展示
内存信息
内存信息
CPU 信息
CPU 信息
设备信息
设备信息

为 UME 开发插件 #

UME 插件位于 ./kits 目录下,每个插件包都是一个 package 本小节示例可参考 ./custom_plugin_example

  1. flutter create -t package custom_plugin 创建一个插件包,可以是 package,也可以是 plugin

  2. 修改插件包的 pubspec.yaml,添加依赖

     dependencies:
       flutter_ume: '>=0.2.0 <0.3.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')
         ),
       ); // 返回插件面板
    
       @override
       String get name => 'CustomPlugin'; // 插件名称
    
       @override
       String get displayName => 'CustomPlugin';
    
       @override
       void onTrigger() {} // 点击插件面板图标时调用
    
       @override
       ImageProvider<Object> get iconImageProvider => NetworkImage('url'); // 插件图标
     }
    
  4. 在工程中引入自定义插件

    1. 修改 pubspec.yaml,添加依赖

       dev_dependencies:
         custom_plugin:
           path: path/to/custom_plugin
      
    2. 执行 flutter pub get

    3. 引入包

       import 'package:custom_plugin/custom_plugin.dart';
      
  5. 在工程中注册插件

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

版本说明 #

兼容性 #

UME 版本Flutter 1.12.13Flutter 1.22.3Flutter 2.0.1Flutter 2.2.3
0.1.x
0.2.x

单测覆盖率 #

masterdevelopdevelop_nullsafety
flutter_umeCoverageCoverageCoverage
flutter_ume_kit_deviceCoverageCoverageCoverage
flutter_ume_kit_perfCoverageCoverageCoverage
flutter_ume_kit_show_codeCoverageCoverageCoverage
flutter_ume_kit_uiCoverageCoverageCoverage
flutter_ume_kit_consoleCoverageCoverageCoverage

版本号规则 #

请参考 Semantic versions

Null-safety 版本 #

null-safety 推荐版本号
flutter_ume0.2.1
flutter_ume_kit_ui0.2.1
flutter_ume_kit_device0.2.1
flutter_ume_kit_perf0.2.1
flutter_ume_kit_show_code0.2.1
flutter_ume_kit_console0.2.1

更新日志 #

Changelog

如何贡献 #

Contributing

开源协议 #

该项目遵循 MIT 协议,详情请见 LICENSE

联系开发者 #

可能你:

  • 发现文档错误、代码有 bug
  • 使用 UME 后应用运行产生异常
  • 发现新版本 Flutter 无法兼容
  • 有好的点子或产品建议

上述情况均可以提一个 issue

可能你:

  • 想与开发者交流
  • 想与更多 Flutter 开发者交流
  • 想与 UME 开展交流或合作

欢迎加入字节跳动 Flutter 交流群

或随时联系开发者

28
likes
120
pub points
78%
popularity

Publisher

opensource.bytedance.com

UME is an in-app debug kits platform for Flutter apps. Produced by Flutter Infra team of ByteDance.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter, flutter_localizations, shared_preferences, string_scanner, tuple, vm_service

More

Packages that depend on flutter_ume