Setup

The widgetbook package provides a flutter widget called Widgetbook in which custom widgets from your app can be injected.

Setting up#

First, add widgetbook as a dev dependency to your pubspec.yaml file:

# pubspec.yaml
dev_dependencies:
  widgetbook:

Create a Widgetbook with mason 🧱#

Checkout the widgetbook_starter brick on Brickhub.

dart pub global activate mason_cli
mason init
mason add widgetbook_starter
mason make widgetbook_starter --name "Name of your widgetbook"

Create a Widgetbook manually#

Since the Widgetbook is launched as a separate app, it is recommended to create another main method. This enables you to switch between your app and Widgetbook at any time. You can even launch your app and Widgetbook simultaneously.

The folder structure might look like this:

example_app
├─ lib
│  ├─ main.dart
├─ widgetbook
│  ├─ main.dart
│  ├─ widgetbook.dart
├─ pubspec.yaml

The widgetbook/widgetbook.dart file contains the Widgetbook wrapped within a stateless widget that enables hot reloading. The code looks like this:

class HotReload extends StatelessWidget {
  const HotReload({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Widgetbook.material(...);
  }
}

In the widgetbook/main.dart run the HotReload widget:

void main() {
  runApp(HotReload());
}