Build & Run

Building your catalog

Once your previews are ready, build your catalog page.

dart run catalog:build

   lib
    |
    |-- ui
        |
        |-- catalog
            |
            |-- catalog_component.dart                  <-- catalog created (main page)
            |
            |-- componentsAPage
            |   |
            |   |-- componentsASubPageA
            |   |   |
            |   |   |-- component_a_a.dart              <-- widget page for created for component_a_a
            |   |
            |   |-- componentsASubPageB
            |   |   |
            |   |   |-- component_a_b.dart              <-- widget page for created for component_a_b
            |   |
            |   |-- components_A_page_dummy.dart        <-- common page for componentsASubPageA and componentsASubPageB
            |
            |-- componentsBPage
                |
                |-- componentsBSubPageA
                |   |
                |   |-- component_b_a.dart              <-- widget page created
                |
                |-- components_B_page_dummy.dart        <-- common page for componentsBSubPageA

Notice the catalog creation path is defined in pubspec.yaml (in this sample /lib/ui/catalog/).

Notice the catalog main page creation path is defined in @Preview and pubspec.yaml.

Run with go_router

final router = GoRouter(
  routes: [
    // ... other routes
    
    // add the catalog route in debug mode (can be run in release, but it is not recommended)
    if (kDebugMode) CatalogComponent.route,
  ],
);

Notice CatalogComponent class name is defined in pubspec.yaml

Run without go_router

Wrap your main app widget with:

runApp(
  CatalogRunner(
    enabled: true,   // <-- or use (--dart-define catalog=true) in command line
    application: MyApp(),
    route: CatalogComponent.route,
  ),
);