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

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

  1. The folder structure in your project, where you place files
  2. 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.

├─ 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.