> 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/architecture/flutter_design_annotation.md).

# flutter\_design\_annotation

Used by the code generator to create catalog to show in the design system viewer.

Annotations will be used by [`flutter_design_codegen`](/design-docs/architecture/flutter_design_codegen.md) to generate **catalog classes** which populates the viewer catalog shown in [`flutter_design_viewer`](/design-docs/architecture/flutter_design_viewer.md).

#### `@Design`

The `@Design` annotation could be used on classes and factory constructors to generated catalog code in accompanying `.catalog.dart` file which is then consumed by the design system viewer. 

{% hint style="info" %}
This is considered an ***inline catalog declaration*** which is very useful for components. For more complicated catalogs, the user should create it in separate catalog files.
{% endhint %}

Here is a minimal example of using `@design`on a **Widget declaration** to create a [**Primary component**](/design-docs/architecture/flutter_design_viewer/page/components.md#primary-component)**:** 

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

Powered by [source\_gen](https://pub.dev/packages/source_gen) and [build\_runner](https://pub.dev/packages/build_runner) the `flutter_design_codegen` package will generate a  catalog for you that could be directly used in the `flutter_design_viewer`.

Here is a fully customized example of using `@Design`:

```dart
@Design(
  // (Optional) Provide a name, if omitted/[null] will default to the class name
  name: null,
  // (Optional) Provide a description, if omitted/[null] will default to the class 
  // documentation (i.e the /// docs on the annotated widget). 
  // The description will be rendered in Markdown.
  description: null,
  // (Optional) Embed design tools (e.g. Figma) that will be shown in an iFrame
  designLink: 
    'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fzi9txHyO7XMo8TYTAv2rku%2FJARVIS%3Fnode-id%3D7188%253A46173',
  // (Optional) Specify the initial values to be shown in the viewer. This will take 
  // priority over the default value in the constructor. Also it will be possible to 
  // assign initial values for `required` parameters.
  viewerInitValueMap: {
    'uri':
        'https://static.independent.co.uk/2021/06/16/08/newFile-4.jpg?quality=75&width=982&height=726&auto=webp',
  },
)
class SpecialWidget extends StatelessWidget {
  ...
}

```

(TBD) Similarly, you can also use the `@Design` annotation on a factory constructor which will create [**Secondary component(s)**](/design-docs/architecture/flutter_design_viewer/page/components.md#secondary-component).