Root Widget

All stories are wrapped in an root widget (i.e. an App widget) to provide a context for the stories to render in.

tree

RootWidget
└── Addon 1
  └── Addon 2
    └── Story

You can use a custom root widget by providing an appBuilder function to the Config. This is helpful if you need to wrap your app widget (i.e. MaterialApp, CupertinoApp) with another custom widget.

Information

If you want to wrap your story in a custom widget, you can also use the Addons API, which provides some more flexibility.

dart

widgetbook/lib/widgetbook.config.dart

// Material App (default)
final config = Config(
  // ...
  appBuilder: materialAppBuilder,
);

// Cupertino App
final config = Config(
  // ...
  appBuilder: cupertinoAppBuilder,
);

// Custom App
final config = Config(
  // ...
  appBuilder: (context, child) {
    return MyCustomAppWidget(
      child: child,
    );
  },
);

Root Widget

On this page