# Builder Addon

The `BuilderAddon` is utility that can help you:

1. Wrap all stories with a custom widget.
2. Create a [custom addon](/addons/custom-addon) with less boilerplate, but the addon will have no "controls" shown in the addons panel.

## Usage

```dart title=widgetbook/lib/widgetbook.config.dart
final config = Config(
  // ...
  addons: [
    BuilderAddon( // [!code highlight]
      name: 'Red', // [!code highlight]
      builder: (context, child) => ColoredBox( // [!code highlight]
        color: Colors.red, // [!code highlight]
        child: child, // [!code highlight]
      ), // [!code highlight]
    ), // [!code highlight]
  ],
);
```

## Third-party Examples

### flutter_screenutil

If you are using [`flutter_screenutil`](https://pub.dev/packages/flutter_screenutil) package, you can use the `BuilderAddon` to wrap your stories with `ScreenUtilInit` widget.

<Warning>
  [`flutter_screenutil`](https://pub.dev/packages/flutter_screenutil) >= 5.9.2
  doesn't work with Widgetbook as they started using `View.of` instead of
  `MediaQuery.of` in
  [`f7c551a`](https://github.com/OpenFlutter/flutter_screenutil/commit/f7c551acd4cc82460c3a29ec5a7262d6ec678746)
</Warning>

```yaml title=widgetbook/pubspec.yaml
dependencies:
  flutter_screenutil: 5.9.1
  widgetbook: ^{{ versions.widgetbook }}
```

```dart title=widgetbook/lib/main.dart
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:widgetbook/widgetbook.dart';

import 'components.g.dart';

void main() {
  runWidgetbook(
    Config(
      components: components,
      addons: [
        BuilderAddon(
          name: 'ScreenUtil',
          builder: (context, child) {
            return ScreenUtilInit(
              designSize: const Size(375, 812),
              minTextAdapt: true,
              splitScreenMode: true,
              useInheritedMediaQuery: true,
              builder: (context, child) => child!,
              child: child,
            );
          },
        ),
      ],
    ),
  );
}
```

### accessibility_tools

An alternative to the deprecated `AccessibilityAddon` is to use the
[`accessibility_tools`](https://pub.dev/packages/accessibility_tools) package with the `BuilderAddon` as follows:

```yaml title=widgetbook/pubspec.yaml
dependencies:
  accessibility_tools: ^2.0.0
  widgetbook: ^{{ versions.widgetbook }}
```

```dart title=widgetbook/lib/main.dart
import 'package:accessibility_tools/accessibility_tools.dart';
import 'package:widgetbook/widgetbook.dart';

import 'components.g.dart';

void main() {
  runWidgetbook(
    Config(
      components: components,
      addons: [
        BuilderAddon(
          name: 'Accessibility',
          builder: (context, child) => AccessibilityTools(
            child: child,
          ),
        ),
      ],
    ),
  );
}
```

## Mode

The `BuilderAddon` has no adjustable value, so it has no corresponding [Mode](/addons/modes). Its `builder` always wraps every story and scenario.