Alignment Addon
Wraps all use-cases with an Align widget. This is useful when you want to center all your use cases without having to wrap each one of them manually.
Without this addon, all your use-cases will be aligned in the top-left corner, unless you wrap them in a Center widget or similar.
Usage
widgetbook/lib/main.dart
class WidgetbookApp extends StatelessWidget {
const WidgetbookApp({super.key});
@override
Widget build(BuildContext context) {
return Widgetbook(
// ...
addons: [
AlignmentAddon(),
],
);
}
}
Order
Since the order of addons matters, here are some guidelines to follow when using the AlignmentAddon:
Addons that should come before the AlignmentAddon:
ViewportAddonDeviceFrameAddonThemeAddonMaterialThemeAddonCupertinoThemeAddonGridAddonInspectorAddon
Addons that should come after the AlignmentAddon:
ZoomAddon
Multi-snapshot Support
The AlignmentAddon is supported in the Multi Snapshot Reviews via the AlignmentAddonConfig. Here's how to configure it:
widgetbook/lib/main.dart
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart';
@App(
cloudAddonsConfigs: {
'Center': [
AlignmentAddonConfig('Center'),
],
'Bottom Center': [
AlignmentAddonConfig('Bottom Center'),
],
},
)
class WidgetbookApp extends StatelessWidget {
const WidgetbookApp({super.key});
@override
Widget build(BuildContext context) {
return Widgetbook(
// ...
addons: [
AlignmentAddon(),
],
);
}
}