# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://flutter-design.gitbook.io/design-docs/what-is-flutter_design.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.