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
- 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
- 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
- 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()); } }
flutter run
for running
orflutter 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
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 detail | color sucker |
align ruler | perf overlay | show code |
console | memory info | cpu info |
device info |
develop plugin kits for ume
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 bepackage
orplugin
. - edit
pubspec.yaml
of the custom plugin kit to add ume framework dependency.dependencies: flutter_ume: '>=0.1.0 <0.2.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 addcustom_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
- 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()); }
- run your app
Comments are closed.