Skip to main content

Overview

When running the builders from flutter_design_codegen, they look for the @Design or @design annotations on your classes. The final output of the builders are:

  • /lib/**/*.design.dart: generated widget component pagesfor the partial file.
  • /lib/page_factory.design.dart: this contains the aggregated generatedComponentPages that can be directly pass to the designer app.

For each file_x.dart that contains an annotated widget, a part file file_x.design.dart will be generated. All annotated widget classes will generate a global component page variable named generated{Folder1}{Folder2}{...}{Filex}{WidgetName}Page.

Finally, a single page_factory.design.dart file will be generated by default at the /lib folder with a single variable generatedComponentPages containing a list of all generated component pages.

note

A component page is the specific type of page that showcases a widget in the designer catalog.

Note that the folder structure of the files will be mirrored in the designer explorer as the widget's structure, e.g.

libs
actions
button.dart
- ButtonWidget
button.design.dart
widgets
misc.dart
- WidgetA
- WidgetB
misc.design.dart

will create the following explorer structure once imported in the designer:

Components # you can customize this node's name
Actions
ButtonWidget # the parent `button` is omitted
Widgets
Misc # this parent stays since there are multiple children widgets
WidgetA
WidgetB

Note that the ButtonWidget's parent file name is omitted in the explorer structure since it only contains a single widget ButtonWidget.