Customization

Root Widget#

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

RootWidget
└── Addon 1
  └── Addon 2
    └── UseCaseRenderer
      └── UseCase
        └── Widget

Here are the available constructors for the root widgets:

Constructor	Root Widget
`Widgetbook.material`	`MaterialApp`
`Widgetbook.cupertino`	`CupertinoApp`
`Widgetbook`	Custom Widget

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

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

@override
Widget build(BuildContext context) {
  return Widgetbook(
    // ...
    appBuilder: (context, child) {
      return AwesomePackage(
        child: MaterialApp(
          debugShowCheckedModeBanner: false,
          home: child,
        )
      );
    }
  );
}

Use-cases Navigation Path#

By default, use-cases has a navigation path in Widgetbook that is based on where their component file is located.

The component name (e.g. Button) and the use-case name (e.g. Primary) are concatenated at the end of the path.

[ Component Directory ] / [ Component Name ] / [ Use-case Name ]

import 'package:your_app/widgets/button.dart';

// Navigation path: `widgets/Button/Primary`
@widgetbook.UseCase(
  name: 'Primary',
  type: Button
)
Widget buildPrimaryButton() {
  return Button();
}

To provide a custom navigation path, you can use the path parameter in the @UseCase annotation.

If you wrap a folder name in square brackets, it will be treated as a category in the navigation path.

import 'package:your_app/components/button.dart';

// Navigation path: `[Interactions]/buttons/Button/Primary`
@widgetbook.UseCase(
  name: 'Primary',
  type: Button,
  path: '[Interactions]/buttons',
)
Widget buildPrimaryButton() {
  return Button();
}

Initial Route#

Initial routes can be used to pick the home page that is used on first launch by providing a initialRoute parameter to the Widgetbook constructor.

To easily get the exact route for a use-case, run your Widgetbook project on web, and copy the value of the URL, then paste it as the value of the initialRoute parameter.

@override
Widget build(BuildContext context) {
  return Widgetbook(
    initialRoute: '?path=introduction/home-use-case',
    // ...
  );
}