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:
1
...
2
​
3
MBManager.shared.plugins = [
4
MBMessages(
5
themeForMessage: (message) => _themeForMessage(message),
6
),
7
];
8
​
9
...
10
​
11
MBInAppMessageTheme _themeForMessage(MBInAppMessage message) {
12
if (message.style == MBInAppMessageStyle.bannerTop) {
13
return MBInAppMessageTheme(
14
titleStyle: TextStyle(
15
fontWeight: FontWeight.bold,
16
color: Colors.blue,
17
),
18
);
19
} else {
20
return MBInAppMessageTheme(
21
titleStyle: TextStyle(
22
fontWeight: FontWeight.normal,
23
color: Colors.red,
24
),
25
);
26
}
27
}
Copied!
Last modified 1yr ago
Copy link