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.

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.