Theme Addon
The Theme Addon lets you inject a theme widget into your tree, to make your use-cases styled and try them out with different themes. There are 3 different variants of the Theme Addon, which depend on the theme data and widget you use in your application:
| Addon | Theme Data | Inherited Widget |
|---|---|---|
MaterialThemeAddon | ThemeData | Theme |
CupertinoThemeAddon | CupertinoThemeData | CupertinoTheme |
ThemeAddon | Custom | Custom |
Material Theme
If your app is built using MaterialApp, then you are probably using ThemeData to define your themes. Then MaterialThemeAddon is the right choice for you.
MaterialThemeAddon(
themes: [
WidgetbookTheme(
name: 'Light',
data: yourMaterialLightTheme,
),
WidgetbookTheme(
name: 'Dark',
data: yourMaterialDarkTheme,
),
],
)
Cupertino Theme
If your app is built using CupertinoApp, then you are probably using CupertinoThemeData to define your themes. Then CupertinoThemeAddon is the right choice for you.
CupertinoThemeAddon(
themes: [
WidgetbookTheme(
name: 'Light',
data: yourCupertinoLightTheme,
),
WidgetbookTheme(
name: 'Dark',
data: yourCupertinoDarkTheme,
),
],
)
Custom Theme
If you have a custom theme data and widget or you have a custom logic to build your theme, then ThemeAddon is the right choice for you.
Assuming you have the following custom theme:
// Custom theme data
class AppThemeData {
AppThemeData(this.color);
final Color color;
}
// Custom theme Inherited Widget
class AppTheme extends InheritedWidget {
const AppTheme({
required this.data,
required Widget child,
super.key,
}) : super(
child: child,
);
final AppThemeData data;
// To access the theme's data using AppTheme.of(context)
static AppThemeData of(BuildContext context) {
final widget = context.dependOnInheritedWidgetOfExactType<AppTheme>();
return widget!.data;
}
@override
bool updateShouldNotify(covariant AppTheme oldWidget) {
return data != oldWidget.data;
}
}
Then you can use a ThemeAddon to inject that theme into your use-cases as follows:
// 1. Define your custom themes somewhere in your app
final blueTheme = AppThemeData(Colors.blue);
final yellowTheme = AppThemeData(Colors.yellow);
// 2. Add ThemeAddon in your Widgetbook addons
ThemeAddon<AppThemeData>(
themes: [
blueTheme,
yellowTheme,
],
themeBuilder: (context, theme, child) {
return AppTheme(
data: theme,
child: child,
);
}
)