flutter_ume

Description:

flutter ume

flutter_ume #
简体中文
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.

flutter_ume

Quick Start
IMPORTANT
Features
Develop plugin kits for UME

Access the nested widget debug kits quickly


How to use UME in Release/Profile mode
About version

Compatibility
Coverage
Version upgrade rules
Null-safety
Change log


Contributing

Contributors
About the third-party open-source project dependencies


LICENSE
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


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
copied to clipboard
↓ 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
copied to clipboard
↓ 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
copied to clipboard


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
copied to clipboard


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());
}
}
copied to clipboard


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.

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.
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!
copied to clipboard

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 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'
copied to clipboard


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
}
copied to clipboard


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
copied to clipboard


Run flutter pub get


Import package
import 'package:custom_plugin/custom_plugin.dart';
copied to clipboard




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());
}
copied to clipboard


Run your app


Access the nested widget debug kits quickly #
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.

How to use UME in Release/Profile mode #
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_ume and plugins should be write below dependencies rather than dev_dependencies.
Don't put the code which call PluginManager.instance.register() and UMEWidget(child: App()) into conditionals which represent debug mode. (Such as kDebugMode)
Ensure the above details, run flutter clean and flutter pub get, then build your app.

About version #
Compatibility #



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.
Coverage #



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




Version upgrade rules #
Please refer to Semantic versions for details.
Null-safety #



Package
Suggest version




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



Change log #
Changelog
Contributing #
Contributing rules: Contributing
Contributors #
Thanks to the following contributors (names not listed in order)：










ShirelyC



lpylpyleo



Alex Li



Swain



mengdouer



LAIIIHZ



XinLei



suli



About the third-party open-source project dependencies #

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.

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.
Or contact author.