UME is an in-app debug kits platform for Flutter apps.
Since ^1.0.0, flutter_ume starts adapting to the Flutter 3. See [Quick Start] to learn more.
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 for more details.
Please see Plugins from community to make your flutter_ume stronger.
- flutter_ume
All packages whose names are prefixed with flutter_ume_kit_ are function
plug-ins of UME, and users can access them according to demand
-
Edit
pubspec.yaml, and add dependencies.Compatible with Flutter 3 since version
1.0.0.dev_dependencies: flutter_ume: ^1.0.1 flutter_ume_kit_ui: ^1.0.0 flutter_ume_kit_device: ^1.0.0 flutter_ume_kit_perf: ^1.0.0 flutter_ume_kit_show_code: ^1.0.0 flutter_ume_kit_console: ^1.0.0 flutter_ume_kit_dio: ^1.0.0
↓ Null-safety version, compatible with Flutter 2.x
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
dev_dependencies: # Don't use UME in release mode flutter_ume: ^0.1.1 flutter_ume_kit_ui: ^0.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
-
Run
flutter pub get -
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 import 'package:flutter_ume_kit_dio/flutter_ume_kit_dio.dart'; // Dio Inspector
-
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(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()); } }
-
flutter runfor running orflutter build apk --debug、flutter build ios --debugfor 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 runneeds to add the--disable-ddsparameter. After Pull Request #80900 merging,--disable-ddswas renamed to--no-dds.
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.
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!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 |
UME plugins are located in the
./kitsdirectory, and each one is apackage. You can refer to the example in./custom_plugin_exampleabout this chapter.
-
Run
flutter create -t package custom_pluginto create your custom plugin kit, it could bepackageorplugin. -
Edit
pubspec.yamlof the custom plugin kit to add UME framework dependency.dependencies: flutter_ume: '>=0.3.0 <0.4.0'
-
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 }
-
Use your custom plugin kit in project
-
Edit
pubspec.yamlof host app project to addcustom_plugindependency.dev_dependencies: custom_plugin: path: path/to/custom_plugin
-
Run
flutter pub get -
Import package
import 'package:custom_plugin/custom_plugin.dart';
-
-
Edit main method of your app, register your custom_plugin plugin kit
if (kDebugMode) { PluginManager.instance ..register(CustomPlugin()); runApp( UMEWidget( child: MyApp(), enable: true ) ); } else { runApp(MyApp()); }
-
Run your app
We introduce the PluggableWithNestedWidget from 0.3.0. It is used to insert nested Widgets in the Widget tree and quickly access embedded kits with nested widget.
For more details, see ./kits/flutter_ume_kit_ui/lib/components/color_picker/color_picker.dart and ./kits/flutter_ume_kit_ui/lib/components/touch_indicator/touch_indicator.dart.
The key steps are as follows:
- The class of your plugin should implement
PluggableWithNestedWidget. - Implements
Widget buildNestedWidget(Widget child). Handling the nested widgets and returning the new Widget.
Once you use flutter_ume in Release/Profile mode, you agree that you will bear the relevant risks by yourself.
The maintainer of flutter_ume does not assume any responsibility for the accident caused by this.
We recommend not to use it in Release/Profile mode for the following reasons:
- VM Service is not available in these environments, so some functions are not available
- In this environment, developers need to isolate the app distribution channels by themselves to avoid submitting relevant debugging code to the production environment
In order to use in Release/Profile mode, the details that need to be adjusted in the normal access process:
- In
pubspec.yaml,flutter_umeand plugins should be write belowdependenciesrather thandev_dependencies. - Don't put the code which call
PluginManager.instance.register()andUMEWidget(child: App())into conditionals which represent debug mode. (Such askDebugMode) - Ensure the above details, run
flutter cleanandflutter pub get, then build your app.
| UME version | 1.12.13 | 1.22.3 | 2.0.1 | 2.2.3 | 2.5.3 | 2.8.0 | 3.0.5 | 3.3.1 |
|---|---|---|---|---|---|---|---|---|
| 0.1.x | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ||
| 0.2.x | ❌ | ❌ | ✅ | ✅ | ✅ | ❌ | ❌ | |
| 0.3.x | ❌ | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ |
| 1.0.x | ❌ | ❌ | ✅ | ✅ | ||||
| 1.1.x | ❌ | ❌ | ✅ | ✅ |
- Please use
flutter_ume_kit_ui: ^1.1.0and above version when you are using Flutter 3.7 and above.
| Package | master | develop | develop_nullsafety |
|---|---|---|---|
| flutter_ume |  |
 |
 |
| flutter_ume_kit_device |  |
 |
 |
| flutter_ume_kit_perf |  |
 |
 |
| flutter_ume_kit_show_code |  |
 |
 |
| flutter_ume_kit_ui |  |
 |
 |
| flutter_ume_kit_console |  |
 |
 |
| flutter_ume_kit_dio |  |
N/A |  |
Please refer to Semantic versions for details.
Contributing rules: Contributing
Thanks to the following contributors (names not listed in order)：
 |
ShirelyC |
 |
lpylpyleo |
 |
Alex Li |
 |
Swain |
 |
mengdouer |
 |
LAIIIHZ |
 |
XinLei |
 |
suli |
 |
wei-spring |
- flutter_ume_kit_channel_monitor
- Channel communication monitor
- Cource code: https://github.com/bytedance/flutter_ume/tree/master/kits/flutter_ume_kit_channel_monitor
- flutter_ume_kit_slow_animation
- Animation speed control
- Cource code: https://github.com/cfug/flutter_ume_kits
- flutter_ume_kit_shared_preferences
- shared_preferences tool
- Cource code: https://github.com/cfug/flutter_ume_kits
- flutter_ume_kit_designer_check
- Comparing tool for Design UI and real UI
- Cource code: https://github.com/cfug/flutter_ume_kits
- flutter_ume_kit_clean_local_data
- Clean local data
- Cource code: https://github.com/cfug/flutter_ume_kits 。
- flutter_ume_kit_database_kit
- DB tool
- Cource code: https://github.com/cfug/flutter_ume_kits 。
- ume_kit_monitor
- Parameters monitor tools
- Cource code: https://github.com/fastcode555/ume_kit_monitor 。
- json2dart_viewerffi
- DB tool
- Cource code: https://github.com/fastcode555/Json2Dart_Null_Safety 。
- json2dart_viewer
- DB tool
- Cource code: https://github.com/fastcode555/Json2Dart_Null_Safety 。
- memory_detector_of_kit
- Leaks tool
- channel_observer_of_kit
- Channel communication monitor
- flutter-ume-kit-dio-enhance
- Plugin base on flutter_ume_kit_dio
- The TouchIndicator use the pub touch_indicator, the ColorPicker use the pub cyclop.
- We fork the package cyclop and modify some code meet our functional needs. We should depend cyclop by pub version after the PR being merged.
This project is licensed under the MIT License - visit the LICENSE for details.
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.
Or contact author.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent