Alignment Addon

Wraps all stories 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 stories will be aligned in the top-left corner, unless you wrap them in a Center widget or similar.

Usage

widgetbook/lib/widgetbook.config.dart
final config = Config(
  // ...
  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:

  • ViewportAddon
  • DeviceFrameAddon
  • ThemeAddon
  • MaterialThemeAddon
  • CupertinoThemeAddon
  • GridAddon
  • InspectorAddon

Addons that should come after the AlignmentAddon:

  • ZoomAddon

Mode

To use this addon for testing, you can enable the AlignmentMode in your stories:

final $Default = _Story(
  scenarios: [
    _Scenario(
      name: 'Center',
      modes: [
        AlignmentMode(Alignment.center), 
      ]
    ),
  ],
)