flutter_design

Description:

flutter design

Provide powerfull tools to help you build your design system.


About #
flutter_design contains packages to help you bootstrap your design system with a well defined framework and code generation/CLI toolchain. It also contains a powerful design system viewer to let you visualize and interact with your design system.

Please checkout the Official website for more information. 🚀

There are mainly 3 packages you need to depend on:

Your production/design package:

flutter_design: provide basic annotation & framework to integrate with the design ecosystem.
flutter_design_codegen: code generator used to generate design code.


Your design viewer app:

flutter_design_viewer: viewer ux and utilities to bootstrap your design viewer app.




Demo #
Checkout the generated viewer app https://flutter-design-7b479.web.app/ using the example code.




Features #
Here are the key objectives of the project:

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/)
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.

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:
dependencies:
#...
flutter_design:

dev_dependencies:
#...
build_runner:
flutter_design_codegen:
copied to clipboard
Note that you might need to add this to the pubspec.yaml file (I'm working on a fix to avoid needing this override):
dependency_overrides:
analyzer: 3.2.0
dart_style: 2.2.1
copied to clipboard
If you see errors like:
class ToSourceIgnoringDesignAnnotationsVisitor implements AstVisitor {
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
../../../Dev/flutter/.pub-cache/hosted/pub.dartlang.org/analyzer-3.3.1/lib/dart/ast/ast.dart:405:6: Context: 'AstVisitor.visitConstructorSelector' is defined here.
copied to clipboard
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!
@design
class SpecialWidget extends StatelessWidget {
...
}
copied to clipboard
After running flutter packages pub run build_runner build --delete-conflicting-outputs the catalogs will be generated:

/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 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:
copied to clipboard
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

You can also customize the pages by creating static or dynamic contents. For more information, please check the docs.
setPathUrlStrategy(); // Recommended to make history browsing work better in web
runApp(
DesignSystemViewerApp(
settings: ViewerSettings(
enabledLocales: {
'en-US': const Locale('en', 'US'),
},
enabledThemes: {
'light': DesignTheme(materialTheme: ThemeData.light()),
'dark': DesignTheme(materialTheme: ThemeData.dark()),
},
),
pageGroups: buildComponentPageTree(componentPages: generatedComponentPages),
),
);
copied to clipboard
That's it! You can then run your designer app on any supported platform ✌. You can checkout some of the screenshots below or rather check the demo app :P