Install Widgetbook in A Flutter Project

If you're not familiar with Widgetbook, you can explore this demo to get an idea. Essentially, it's a UI component documentation tool, perfect for teams with lots of custom widgets. It can be incredibly useful!

Widgetbook Demo

• https://demo.widgetbook.io/#/?path=features/basket/views/basketview/non-empty

You can integrate Widgetbook into your project in two ways: as a single app or a separate app. In this article, I'll walk you through how I set up Widgetbook in a single app form for my project.

// single app
flutter_app
└─── lib
| └─── feature.dart
│ └─── main.dart
│ └─── main.widgetbook.dart
└─── pubspec.yaml

// separate app
flutter_app
└─── feature_1
└─── app
|    └───lib
|    |    └─── main.dart
|    └─── pubspec.yaml
└─── widgetbook_app
|    └─── lib
|    |    └─── main.widgetbook.dart
|    └─── pubspec.yaml

Install Widgetbook Package

• Add the packages to pubspec.yaml

dependencies:
   // ... your other dependencies
   widgetbook_annotation: ^3.2.0
   widgetbook: ^3.9.0

dev_dependencies:
  build_runner:
  widgetbook_generator: ^3.9.0

• Run flutter pub get

• Create a widgetbook.dart file in your lib folder

• Paste these code

// lib/widgetbook.dart
// widgetbook.dart 

import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;

// Import the generated directories variable
import 'widgetbook.directories.g.dart';

void main() {
  runApp(const WidgetbookApp());
}

// The @App annotation generates a file containing
// a single variable called directories.
@widgetbook.App()
class WidgetbookApp extends StatelessWidget {
  const WidgetbookApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Widgetbook.material(
      // Use the generated directories variable
      directories: directories,
    );
  }
}

• Create another file to test out your widget. For example, custom_button.dart

• Paste these code

// lib/components/custom_button.dart
import 'package:flutter/material.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;

class CustomButton extends StatelessWidget {
  const CustomButton({
    super.key,
    required this.title,
    this.onPressed,
  });

  final String title;
  final VoidCallback? onPressed;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(title),
    );
  }
}

@widgetbook.UseCase(
  name: 'Enabled',
  type: CustomButton,
)
CustomButton enabledButton(BuildContext context) {
  return CustomButton(
    title: 'Enabled',
    onPressed: () {},
  );
}

@widgetbook.UseCase(
  name: 'Disabled',
  type: CustomButton,
)
CustomButton disabledButton(BuildContext context) {
  return const CustomButton(
    title: 'Disabled',
  );
}

• Run the following command to generate the main.directories.g.dart file that has the directories variable:

$ flutter pub run build_runner build --delete-conflicting-outputs

$ dart run build_runner build -d

$ flutter run -d chrome -t lib/widgetbook.dart

Resources

Widgetbook Community Get Started guide

(I find this one straightforward and only need to change a few codes, as the package version has upgraded.)

• https://www.widgetbook.io/blog/getting-started

YouTube Widgetbook Installation Walkthrough

• https://www.youtube.com/watch?v=7NFXlHhpWjk&t=201s

Widgetbook Official Documentation

• https://widgetbook.docs.page/widgetbook/guides/quick-start