You need to declare a map that follows the struct Map<String, ComponentBuilder>
and pass it to the initialization method BeagleSdk.init
.
This struct tells Beagle which widget to render when a given identifier comes into the JSON.
The String key of the map is the _beagleComponent_
property in JSON that identifies the widget type. You can name it whatever you like, as long as the prefix is custom:
.
The ComponentBuilder
value of the map is a function that receives as parameters:
BeagleUIElement
;BeagleView
.It returns a widget and follows the struct Widget Function(BeagleUIElement element, List<Widget> children, BeagleView view)
.
These parameters are available because they provide all the information needed to build a custom widget, such as context and children.
Follow these steps to learn how to create and use your own custom widgets:
Define the identifier, here let’s name it custom:loading
.
Create your widget regardless of Beagle. For this example, we’ll use the simple widget below:
final customLoading = Center(
child: const Text('My custom loading.'),
);
Create the struct that it will pass to Beagle, see below:
Map<String, ComponentBuilder> myCustomComponents = {
'custom:loading': (element, children, view) {
return customLoading;
}
};
Pass the map you have created through the Beagle init method, now Beagle will be able to render your widget:
BeagleSdk.init(
components: myCustomComponents,
);
That’s it! Now you can use your custom component with Beagle Flutter!
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.