flutter_ume

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

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.

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 packages

    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. Edit main method of your app, register plugin kits and initial 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 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 showDialog, showGeneralDialog 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 Info
Widget Detail
Widget Detail
Color Sucker
Color Sucker
Align Ruler
Align Ruler
Perf Overlay
Perf Overlay
Show Code
Show Code
Console
Console
Memory Info
Memory Info
CPU Info
CPU Info
Device 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 package

      import 'package:custom_plugin/custom_plugin.dart';
      
  5. Edit main method of your app, register your custom_plugin plugin kit

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

GitHub

https://github.com/bytedance/flutter_ume