UME Core is the core library of UME, including the UME framework and basic components.
If you need to use UME's built-in components, just add ume to your pubspec.yaml without adding ume_core.
If you need to develop custom UME plugins or use non-built-in components, you need to add ume_core.
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: ume_core: ^2.0.0
-
Create the class of the plugin kit which should implement
Pluggable.import 'package:ume_core/ume_core.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/ume_kit_ui/lib/components/color_picker/color_picker.dart and ./kits/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.