> For the complete documentation index, see [llms.txt](https://flutter-design.gitbook.io/design-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://flutter-design.gitbook.io/design-docs/what-is-flutter_design.md).

# What is flutter\_design?

The objective of [GitHub - ShiroYacha/flutter\_design](https://github.com/ShiroYacha/flutter_design) is to:

* **Provide tools to create a design system** and a simple workflow to document/visualize it
  * Provide a guideline/classes to build the system
  * Provide a code generator to reduce boilerplates
  * Provide a CLI to speed up and organize widgets (TBD)
* **Provide a powerful design viewer** with the following core features
  * Cross-platform: visualize on web/desktop/mobile
  * Complete design documentation system 
  * Book-like structure & fully integrated search (currently only supporting in-memory search, with an interface inspired by <https://www.algolia.com/ref/docsearch/>)&#x20;
  * Visualize UX in multiple synchronized frames (user interaction such as scroll, tap, drag is propagated) across
    * Different device frames
    * Different theme frames
    * Different locale frames
  * Runtime data configuration: you can easily "try-out" different data in runtime, e.g. `Color`, `Values`, or even `Widget`! It is also possible to create your own data generator.

The UX and design is inspired by [Wanda Design System](https://design.wonderflow.ai/).

## Demo

Checkout the generated viewer app <https://flutter-design-7b479.web.app/> using the [example code](<https://github.com/ShiroYacha/flutter_design/tree/main/packages/flutter_design_viewer/example >) (inspired by <https://design.wonderflow.ai/>).

## Basic integration

First, on your code base (where you will implement your design system/widgets) you have to add the following dependencies to your `pubspec.yaml`:&#x20;

```
dependencies:
  #...
  flutter_design:

dev_dependencies:
  #...
  build_runner:
  flutter_design_codegen:
```

Then you would need to annotate the widgets you want to integrate in the design system viewer using the `@design` annotation. Yes, it's that easy! &#x20;

```
@design
class SpecialWidget extends StatelessWidget {
  ...
}
```

After running `flutter packages pub run build_runner build --delete-conflicting-outputs` the catalogs will be generated:

* `/lib/**/*.design.dart`: generated widget catalogs for the partial file.
* `/lib/page_factory.design.dart`: this contains the aggregated `generatedComponentPages` that can be directly pass to the `DesignSystemViewerApp` described later.

Finally you can create a flutter designer app (currently supporting Android, iOS, Web, macOS, Windows) to host the design system viewer by adding the following dependencies to the `pubspec.yaml`

```
dependencies:
  #...
  your_package:
  flutter_design:
  flutter_design_viewer:
```

Then you need to basically setup the design system viewer in your app using the `generatedComponentPages` along with some other settings you might want to configure:

* `enabledLocales` the locales your design system supports
* `enabledThemes` the `ThemeData` your design system supports

{% hint style="info" %}
You can also customize the pages by creating static or dynamic contents. For more information, please check [Page](/design-docs/architecture/flutter_design_viewer/page.md)
{% endhint %}

```
runApp(
    DesignSystemViewerApp(
      settings: ViewerSettings(
        enabledLocales: {
          'en-US': const Locale('en', 'US'),
        },
        enabledThemes: {
          'light': ThemeData.light(),
          'dark': ThemeData.dark(),
        },
      ),
      pageGroups: buildComponentPageTree(componentPages: generatedComponentPages),
    ),
);
```

That's it! You can then run your designer app on any supported platform :rocket: You can checkout some of the [screenshots below](#screenshots) or rather check the [demo app](#demo) :P&#x20;

## Advanced usage (WIP)

## Screenshots (WIP)

![](/files/okncMWaZXr0QiDZC3gYo)

![](/files/aILaiqqkEkPQZnFK50dT)

![](/files/Gz4rTNfqNyg7Ch8CmZM1)

![](/files/jHr5e79Hi6NnIjxxxULZ)