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.
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.
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 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 merging,--disable-dds
was 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
./kits
directory, and each one is apackage
. You can refer to the example in./custom_plugin_example
about this chapter.
Run flutter create -t package custom_plugin
to create your custom plugin kit, it could be package
or plugin
.
Edit pubspec.yaml
of 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.yaml
of host app project to add custom_plugin
dependency.
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:
PluggableWithNestedWidget
.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:
In order to use in Release/Profile mode, the details that need to be adjusted in the normal access process:
pubspec.yaml
, flutter_ume
and plugins should be write below dependencies
rather than dev_dependencies
.PluginManager.instance.register()
and UMEWidget(child: App())
into conditionals which represent debug mode. (Such as kDebugMode
)flutter clean
and flutter 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 | ❌ | ❌ | ⚠️ | ⚠️ | ⚠️ | ⚠️ | ✅ | ✅ |
⚠️ means the version has not been fully tested for compatibility.
flutter_ume_kit_ui: ^1.1.0
and 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 |
This project is licensed under the MIT License - visit the LICENSE for details.
Maybe...
You can submit an issue in any of the above situations.
Maybe...
Welcome to Join the ByteDance Flutter Exchange Group.
Or contact author.