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.
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:
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.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());
}
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:
PluggableWithNestedWidget.Widget buildNestedWidget(Widget child). Handling the nested widgets and returning the new Widget.