Structure

Widgetbook is flexible and powerful enough to fit into your project's structure.

The structure of your components can be divided into two parts:

The folder structure in your project, where you place files
The navigation that will be created in Widgetbook

Let's take a look at a typical Flutter example. In this case, you may add a components or widgets folder to your projects where you can manage your UI catalog's structure.

your_flutter_project/
├─ android/
├─ ios/
├─ lib/
│ ├─ main.dart
│ ├─ src/
│ │ ├─ components/
│ │ ├────── containers.dart
│ │ ├────── buttons.dart
│ │ ├─ models/
│ │ └─ services/
│ └─ ...
├─ assets/
│ ├─ images/
│ ├─ fonts/
│ └─ ...
├─ test/
├─ pubspec.yaml
└─ ...

You may adjust based on your team and the project's preferences.

However, placing files in different folders doesn't necessarily reflect the navigation in Widgetbook.

Navigation structure

The navigation structure in Widgetbook depends on which approach you select.

The generator creates the navigation tree based on the component's file location specified for the type parameter of the @UseCase annotation. Therefore, the navigation structure of the Widgetbook resembles the structure of your application or package.

As of now, it's not possible to configure a different navigation structure using the generator. The Widgetbook team aims to provide a solution in the future.

As your project expands, it may not be as efficient or accessible to add WidgetbookComponent directly to the directories project on Widgetbook constructors. It's important to consider scalability and ease of access when making these decisions.

The alternatives are:

WidgetbookCategory
WidgetbookFolder

Both WidgetbookCategory and WidgetbookFolder can contain sub-folders and WidgetbookComponent elements. However, WidgetbookComponent can only contain WidgetbookUseCases.

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

import 'components/container.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return Widgetbook.material(
      addons: [],
      directories: [
        WidgetbookCategory(
          name: 'Containers',
          children: [
            WidgetbookComponent(
              name: 'With colors',
              useCases: [
                WidgetbookUseCase(
                  name: 'green',
                  builder: (context) => greenContainerUseCase(context),
                ),
              ],
            ),
          ],
        ),
        WidgetbookFolder(
          name: 'Texts',
          children: [
            WidgetbookComponent(
              name: 'Size',
              useCases: [
                WidgetbookUseCase(
                  name: 'Default',
                  builder: (context) => const Text(
                    'The default text ...',
                  ),
                ),
              ],
            ),
          ],
        ),
      ],
    );
  }
}

Running this example will look like the screenshot below.

Overview

Getting Started

Addons

Knobs

Monorepo

Migration

Next

Cookbook

Widgetbook Cloud

CLI

Contribution

Structure

Navigation structure

On this page