Stylize in app messages
If you want to specify fonts and colors of the messages displayed you can use the
themeForMessage function and provide a theme for the specified message. For each message you can specify the following properties:- backgroundColor: the color of the background
- titleStyle: the text style for the title of the message
- bodyStyle: the text style for the body of the message
- closeButtonColor: the color of the close button
- closeButtonBackgroundColor: the background color of the close button
- button1BackgroundColor: the background color for the first button
- button1TextStyle: the text style for the first button.
- button2BackgroundColor: the background color for the second button
- button2BorderColor: the border color for the second button
- button2TextStyle: the text style for the second button
Example:
...
MBManager.shared.plugins = [
MBMessages(
themeForMessage: (message) => _themeForMessage(message),
),
];
...
MBInAppMessageTheme _themeForMessage(MBInAppMessage message) {
if (message.style == MBInAppMessageStyle.bannerTop) {
return MBInAppMessageTheme(
titleStyle: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blue,
),
);
} else {
return MBInAppMessageTheme(
titleStyle: TextStyle(
fontWeight: FontWeight.normal,
color: Colors.red,
),
);
}
}
Last modified 2yr ago