If you want to be able to use images, styled texts, and buttons, you must provide a DesignSystem implementation to Beagle Flutter. You can use it in any default widget. For more information about how to use the default components library, see the configuration page.
It’s simple to create your own Design System. You just need to:
BeagleDesignSystem
contract;See more details of each one of them below:
This method has the notation String image(String id)
. It receives the image id that comes from the JSON and returns the corresponding local image asset name. See the example:
final Map<String, String> imageMap = {
'bus': 'images/bus.png',
'car': 'images/car.png',
'person': 'images/person.png',
};
@override
String image(String id) {
return imageMap[id];
}
This method has the notation BeagleButtonStyle buttonStyle(String id)
. It receives the button style id that comes from the JSON and returns the corresponding BeagleButtonStyle
. See below:
final Map<String, BeagleButtonStyle> buttonMap = {
'primaryButton': BeagleButtonStyle(
androidButtonStyle: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
),
iosButtonStyle: BeagleIosButtonStyle(
color: Colors.green,
),
),
'secondaryButton': BeagleButtonStyle(
androidButtonStyle: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.greenAccent),
),
iosButtonStyle: BeagleIosButtonStyle(
color: Colors.greenAccent,
),
),
};
@override
BeagleButtonStyle buttonStyle(String id) {
return buttonMap[id];
}
This method has the notation TextStyle textStyle(String id)
. It receives the text style id that comes from the JSON and returns the corresponding TextStyle
. Check out an implementation:
final Map<String, TextStyle> textMap = {
'h1': TextStyle(
fontSize: 22,
),
'h2': TextStyle(
fontSize: 18,
),
};
@override
TextStyle textStyle(String id) {
return textMap[id];
}
Here is the complete example of a DesignSystem implementation of Beagle Flutter:
class MyDesignSystem extends BeagleDesignSystem {
final Map<String, String> imageMap = {
'bus': 'images/bus.png',
'car': 'images/car.png',
'person': 'images/person.png',
};
final Map<String, BeagleButtonStyle> buttonMap = {
'primaryButton': BeagleButtonStyle(
androidButtonStyle: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
),
iosButtonStyle: BeagleIosButtonStyle(
color: Colors.green,
),
),
'secondaryButton': BeagleButtonStyle(
androidButtonStyle: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.greenAccent),
),
iosButtonStyle: BeagleIosButtonStyle(
color: Colors.greenAccent,
),
),
};
final Map<String, TextStyle> textMap = {
'h1': TextStyle(
fontSize: 22,
),
'h2': TextStyle(
fontSize: 18,
),
};
@override
String image(String id) {
return imageMap[id];
}
@override
BeagleButtonStyle buttonStyle(String id) {
return buttonMap[id];
}
@override
TextStyle textStyle(String id) {
return textMap[id];
}
}
Just like any other configuration in Beagle Flutter, if you want to use your implementation of a Design System, you need to pass it in the initialization method BeagleSdk.init
. See below:
BeagleSdk.init(
designSystem: MyDesignSystem(),
);
And that’s it! This is all the configuration needed to create and use a custom design system in 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.