# flutter_ume [简体中文](./README.md) UME is an in-app debug kits platform for Flutter apps. [![platforms](https://img.shields.io/badge/platforms-ios%20%7C%20android%20%7C%20web%20%7C%20macos%20%7C%20windows%20%7C%20linux-lightgrey)](https://pub.dev/packages/flutter_ume) [![license](https://img.shields.io/github/license/bytedance/flutter_ume.svg)](https://github.com/bytedance/flutter_ume/blob/master/LICENSE) [![latest](https://img.shields.io/pub/vpre/flutter_ume.svg)](https://pub.dev/packages/flutter_ume) ![![likes](https://badges.bar/flutter_ume/likes)](https://pub.dev/packages/flutter_ume/score) ![![popularity](https://badges.bar/flutter_ume/popularity)](https://pub.dev/packages/flutter_ume/score) ![![pub points](https://badges.bar/flutter_ume/pub%20points)](https://pub.dev/packages/flutter_ume/score) banner

**UME Kits competition is in full swing!** Rich prizes are waiting for you. See https://mp.weixin.qq.com/s/RuwiiQAdrGqI00fDhUO77g for more details. banner

Scan QR code or click link to download apk. Try it now! https://github.com/bytedance/flutter_ume/releases/download/v0.2.1.0/app-debug.apk There are 13 plugin kits built in the latest open source version of UME. Developer could create custom plugin kits, and integrate them into UME. Visit [Develop plugin kits for UME](#develop-plugin-kits-for-ume) for more details. - [flutter_ume](#flutter_ume) - [Quick Start](#quick-start) - [IMPORTANT](#important) - [Features](#features) - [Develop plugin kits for UME](#develop-plugin-kits-for-ume) - [Access the nested widget debug kits quickly](#access-the-nested-widget-debug-kits-quickly) - [How to use UME in Release/Profile mode](#how-to-use-ume-in-releaseprofile-mode) - [About version](#about-version) - [Compatibility](#compatibility) - [Coverage](#coverage) - [Version upgrade rules](#version-upgrade-rules) - [Null-safety](#null-safety) - [Change log](#change-log) - [Contributing](#contributing) - [Contributors](#contributors) - [About the third-party open-source project dependencies](#about-the-third-party-open-source-project-dependencies) - [LICENSE](#license) - [Contact the author](#contact-the-author) ## Quick Start **All packages whose names are prefixed with `flutter_ume_kit_` are function** **plug-ins of UME, and users can access them according to demand** 1. Edit `pubspec.yaml`, and add dependencies. **↓ Null-safety version, compatible with Flutter 2.x** ``` yaml dev_dependencies: # Don't use UME in release mode 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 ``` **↓ Non-null-safety version, compatible with Flutter 1.x** ``` yaml dev_dependencies: # Don't use UME in release mode flutter_ume: ^0.1.1 flutter_ume_kit_ui: ^0.1.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. Run `flutter pub get` 3. Import packages ``` dart 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 import 'package:flutter_ume_kit_dio/flutter_ume_kit_dio.dart'; // Dio Inspector ``` 4. Edit main method of your app, register plugin kits and initial UME ``` dart void main() { if (kDebugMode) { PluginManager.instance // Register plugin kits ..register(WidgetInfoInspector()) ..register(WidgetDetailInspector()) ..register(ColorSucker()) ..register(AlignRuler()) ..register(ColorPicker()) // New feature ..register(TouchIndicator()) // New feature ..register(Performance()) ..register(ShowCode()) ..register(MemoryInfoPage()) ..register(CpuInfoPage()) ..register(DeviceInfoPanel()) ..register(Console()) ..register(DioInspector(dio: dio)); // Pass in your Dio instance // After flutter_ume 0.3.0 runApp(UMEWidget(child: MyApp(), enable: true)); // Before flutter_ume 0.3.0 runApp(injectUMEWidget(child: MyApp(), enable: true)); } else { runApp(MyApp()); } } ``` 5. `flutter run` for running or `flutter build apk --debug`、`flutter 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](https://github.com/flutter/flutter/pull/80900) merging, `--disable-dds` was renamed to `--no-dds`. ## IMPORTANT **From `0.1.1`/`0.2.1` version，we don't need set `useRootNavigator: false`.** The following section only applies to versions before version `0.1.1`/`0.2.1` . 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. ``` dart showDialog( context: context, builder: (ctx) => AlertDialog( title: const Text('Dialog'), actions: [ TextButton( onPressed: () => Navigator.pop(context), child: const Text('OK')) ], ), useRootNavigator: false); // <===== It's very IMPORTANT! ``` ## Features There are 13 plugin kits built in the current open source version of UME.

UI kits
Widget Info	Widget Detail	Align Ruler
Color Picker	Color Sucker	Touch Indicator

Performance Kits
Memory Info	Perf Overlay

Device Info Kits
CPU Info	Device Info

Show Code
Show Code

Console
Console

Dio Inspector
Dio Inspector

## Develop plugin kits for UME > UME plugins are located in the `./kits` directory, and each one is a `package`. > You can refer to the example in [`./custom_plugin_example`](./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. ``` yaml dependencies: flutter_ume: '>=0.3.0 <0.4.0' ``` 3. Create the class of the plugin kit which should implement `Pluggable`. ``` dart 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