# Alignment Addon

Wraps all stories with an [`Align`](https://api.flutter.dev/flutter/widgets/Align-class.html) widget. This is useful when you want to center all your stories 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.

<Tabs
  values={[
    { label: "Center", value: "center" },
    { label: "Top Left", value: "top-left" },
  ]}
>
  <TabItem value="center">
    <iframe
      src="https://demo.widgetbook.io/#/?path=ui/widgets/primarybutton/default&alignment={alignment:Center}&device={name:None}&preview"
      width="100%"
      height="420px"
    />
  </TabItem>
  <TabItem value="top-left">
    <iframe
      src="https://demo.widgetbook.io/#/?path=ui/widgets/primarybutton/default&alignment={alignment:Top%20Left}&device={name:None}&preview"
      width="100%"
      height="420px"
    />
  </TabItem>
</Tabs>

## Usage

```dart title=widgetbook/lib/widgetbook.config.dart
final config = Config(
  // ...
  addons: [
    AlignmentAddon(), // [!code highlight]
  ],
);
```

## Order

Since the [order of addons](/addons/overview#order-of-addons) matters, here are some guidelines to follow when using the `AlignmentAddon`:

Addons that should come before the `AlignmentAddon`:

- `ViewportAddon`
- `ThemeAddon`
- `MaterialThemeAddon`
- `CupertinoThemeAddon`
- `GridAddon`

Addons that should come after the `AlignmentAddon`:

- `ZoomAddon`

## Mode

Each addon has a corresponding [Mode](/addons/modes) to lock its value in scenarios. For this addon, use `AlignmentMode`:

```dart
final $Default = _Story(
  scenarios: [
    _Scenario(
      name: 'Center',
      modes: [
        AlignmentMode(Alignment.center), // [!code highlight]
      ]
    ),
  ],
)
```