UME is an in-app debug kits platform for Flutter

  Flutter App

flutter_ume

banner

UME is an in-app debug kits platform for Flutter apps.

There are 10 plugin kits built in the current open source version of UME. Developer could create custom plugin kits, and integrate them into UME. Visit Develop plugin kits for UME for more details.

  • flutter_ume
    • Quick Start
    • IMPORTANT
    • Features
    • Develop plugin kits for UME
    • About version
      • Compatibility
      • Coverage
      • Version upgrade rules
      • Change log
    • How to contribute
    • LICENSE
    • Contact the author

Quick Start

  1. Edit pubspec.yaml, and add dependencies.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. Run flutter pub get
  3. Import packagesimport ‘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. Edit main method of your app, register plugin kits and initial UMEvoid 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 for running or flutter build apk --debugflutter build ios --debug for building productions.

Some functions rely on VM Service, and additional parameters need to be added for local operation to ensure that it can connect to the VM Service.

Flutter 2.0.x, 2.2.x and other versions run on real devices, flutter run needs to add the --disable-dds parameter. After Pull Request #80900 merging, --disable-dds was renamed to --no-dds.

IMPORTANT

Since UME manages the routing stack at the top level, methods such as showDialog use rootNavigator to pop up by default, therefore must pass in the parameter useRootNavigator: false in showDialogshowGeneralDialog and other ‘show dialog’ methods to avoid navigator errors.

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!

Features

There are 10 plugin kits built in the current open source version of UME.


Widget Info

Widget Detail

Color Sucker

Align Ruler

Perf Overlay

Show Code

Console

Memory Info

CPU Info

Device Info

Develop plugin kits for UME

You can refer to the example in ./custom_plugin_example about this chapter.

  1. Run flutter create -t package custom_plugin to create your custom plugin kit, it could be package or plugin.
  2. Edit pubspec.yaml of the custom plugin kit to add UME framework dependency.dependencies: flutter_ume: ‘>=0.1.0 <0.2.0’
  3. Create the class of the plugin kit which should implement 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. Use your custom plugin kit in project
    1. Edit pubspec.yaml of host app project to add custom_plugin dependency.dev_dependencies: custom_plugin: path: path/to/custom_plugin
    2. Run flutter pub get
    3. Import packageimport ‘package:custom_plugin/custom_plugin.dart’;
  5. Edit main method of your app, register your custom_plugin plugin kitif (kDebugMode) { PluginManager.instance ..register(CustomPlugin()); runApp( injectUMEWidget( child: MyApp(), enable: true ) ); } else { runApp(MyApp()); }
  6. Run your app

About version

Compatibility

UME versionFlutter 1.12.13Flutter 1.22.3Flutter 2.0.1Flutter 2.2.1
0.1.0white_check_markwhite_check_markwhite_check_markwhite_check_mark

Coverage

Packagemasterdevelop
flutter_ume
flutter_ume_kit_device
flutter_ume_kit_perf
flutter_ume_kit_show_code
flutter_ume_kit_ui
flutter_ume_kit_console

Version upgrade rules

Please refer to Semantic versions for details.

Change log

Changelog

How to contribute

Contributing

LICENSE

This project is licensed under the MIT License – visit the LICENSE for details.

Contact the author

Maybe…

  • Found a bug in the code, or an error in the documentation
  • Produces an exception when you use the UME
  • UME is not compatible with the new version Flutter
  • Have a good idea or suggestion

You can submit an issue in any of the above situations.

Maybe…

  • Communicate with the author
  • Communicate with more community developers
  • Cooperate with UME

Welcome to Join the ByteDance Flutter Exchange Group.

Download UME is an in-app debug kits platform source code on GitHub

UME is an in-app debug kits platform for Flutter. Produced by Flutter Infra team of ByteDance
https://github.com/bytedance/flutter_ume
225 forks.
2,068 stars.
31 open issues.

Recent commits: