Provide powerfull tools to help you build your Flutter design system.

Last update: Dec 3, 2022

Related tags

Overview

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:

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

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.

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 {
  ...
}

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:

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),
    ),
);

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

Build a system that recommends jobs based on resume.

Job Findr Problem Statement: Build a system that recommends jobs based on resume. Problem Description: The problem statement suggests to build a syste

Jul 8, 2022

Add easily to your app an introduction screen to provide informations to new users

IntroductionScreen Introduction screen allow you to have a screen at launcher for example, where you can explain your app. This Widget is very customi

Jan 6, 2023

🎨 An opinionated, effective and correct way to provide multiple themes to your app.

theming This is an opinionated and effective way to provide multi-theme choice for your app. theming depends on provider and shared_preference for sta

Nov 28, 2022

Flutter package that provides you custom clippers to help you achieve various custom shapes.

flutter_custom_clippers Flutter package that provides you custom clippers to help you achieve various custom shapes. Usage To use this plugin, add flu

Dec 23, 2022

A package help you to make api call and handle error faster, also you can check for internet before call api.

http_solver ##not for production use, only for learning purpose. A package help you to make api call and handle error faster, also you can check for i

Jun 18, 2020

This project is a NGO which let you donate anything or even let you ask for help to people.

ngo_app This app is written in flutter using dart language. Getting Started This project is a NGO which let you donate anything or even let you ask fo

May 8, 2022

Chance Dart is a free Open Source project that lets you create random strings, integers, and other things to help with tiresome tasks, especially when building automated tests or wherever else you require anything random.

Chance Dart Random generator helper for Dart Homepage • Documentation Overview Chance Dart is a free Open Source project that lets you create random s

Dec 27, 2022

Design system flutter - A framework contains SBB (Swiss Federal Railways) UI elements for Flutter Apps

Design System Mobile for Flutter Design System Mobile in Flutter (yes, it could

Dec 22, 2022

Implements Microsoft's Fluent Design System in Flutter.

fluent_ui Design beautiful native windows apps using Flutter Unofficial implementation of Fluent UI for Flutter. It's written based on the official do

Dec 29, 2022

Comments

Code generation not working
When I'm trying to build code it gives me this warning and errors then fails the build.

[WARNING] ../../../Dev/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_design_codegen-0.0.11-pre+1/lib/src/ast.dart:24:7: Error: The non-abstract class 'ToSourceIgnoringDesignAnnotationsVisitor' is missing implementations for these members:

AstVisitor.visitConstructorSelector

AstVisitor.visitEnumConstantArguments Try to either

provide an implementation,

inherit an implementation from a superclass or mixin,

mark the class as abstract, or

provide a 'noSuchMethod' implementation.

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. R? visitConstructorSelector(ConstructorSelector node); ^^^^^^^^^^^^^^^^^^^^^^^^ ../../../Dev/flutter/.pub-cache/hosted/pub.dartlang.org/analyzer-3.3.1/lib/dart/ast/ast.dart:423:6: Context: 'AstVisitor.visitEnumConstantArguments' is defined here. R? visitEnumConstantArguments(EnumConstantArguments node); ^^^^^^^^^^^^^^^^^^^^^^^^^^ [INFO] Precompiling build script... completed, took 949ms

[SEVERE] Failed to precompile build script .dart_tool/build/entrypoint/build.dart. This is likely caused by a misconfigured builder definition.
documentation
opened by ambanikousik 3
Dando problema mesmo adicionando dependency_overrides
I created a new project, I did the steps informed, but even adding everything as informed I still get the error:

% flutter packages pub run build_runner build --delete-conflicting-outputs

[INFO] Generating build script... [INFO] Generating build script completed, took 586ms

[INFO] Precompiling build script...... [WARNING] ../.pub-cache/hosted/pub.dartlang.org/flutter_design_codegen-0.0.12-pre+2/lib/src/ast.dart:29:7: Error: The non-abstract class 'ToSourceIgnoringDesignAnnotationsVisitor' is missing implementations for these members:

AstVisitor.visitConstructorSelector

AstVisitor.visitEnumConstantArguments Try to either

provide an implementation,

inherit an implementation from a superclass or mixin,

mark the class as abstract, or

provide a 'noSuchMethod' implementation.

class ToSourceIgnoringDesignAnnotationsVisitor implements AstVisitor { ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ../.pub-cache/hosted/pub.dartlang.org/analyzer-3.4.1/lib/dart/ast/ast.dart:405:6: Context: 'AstVisitor.visitConstructorSelector' is defined here. R? visitConstructorSelector(ConstructorSelector node); ^^^^^^^^^^^^^^^^^^^^^^^^ ../.pub-cache/hosted/pub.dartlang.org/analyzer-3.4.1/lib/dart/ast/ast.dart:423:6: Context: 'AstVisitor.visitEnumConstantArguments' is defined here. R? visitEnumConstantArguments(EnumConstantArguments node); ^^^^^^^^^^^^^^^^^^^^^^^^^^ [INFO] Precompiling build script... completed, took 806ms

[SEVERE] Failed to precompile build script .dart_tool/build/entrypoint/build.dart. This is likely caused by a misconfigured builder definition.
opened by kitoide 0
Problem to run flutter packages pub run build_runner build --delete-conflicting-outputs
Failed to build build_runner:build_runner: ../../.pub-cache/hosted/pub.dartlang.org/build_resolvers-2.0.9/lib/src/resolver.dart:442:13: Error: Method not found: 'buildSdkSummary2'. await buildSdkSummary2( ^^^^^^^^^^^^^^^^ ../../.pub-cache/hosted/pub.dartlang.org/build_resolvers-2.0.9/lib/src/build_asset_uri_resolver.dart:88:20: Error: The method 'applyPendingFileChanges' isn't defined for the class 'AnalysisDriverForPackageBuild'.

'AnalysisDriverForPackageBuild' is from 'package:analyzer/src/clients/build_resolvers/build_resolvers.dart' ('../../.pub-cache/hosted/pub.dartlang.org/analyzer-3.2.0/lib/src/clients/build_resolvers/build_resolvers.dart'). Try correcting the name to the name of an existing method, or defining a method named 'applyPendingFileChanges'. await driver.applyPendingFileChanges(); ^^^^^^^^^^^^^^^^^^^^^^^ ../../.pub-cache/hosted/pub.dartlang.org/dart_style-2.2.3/lib/src/source_visitor.dart:805:18: Error: The getter 'superclass' isn't defined for the class 'ClassTypeAlias'.

'ClassTypeAlias' is from 'package:analyzer/dart/ast/ast.dart' ('../../.pub-cache/hosted/pub.dartlang.org/analyzer-3.2.0/lib/dart/ast/ast.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'superclass'. visit(node.superclass); ^^^^^^^^^^ ../../.pub-cache/hosted/pub.dartlang.org/dart_style-2.2.3/lib/src/source_visitor.dart:1072:16: Error: The getter 'type' isn't defined for the class 'ConstructorName'.

'ConstructorName' is from 'package:analyzer/dart/ast/ast.dart' ('../../.pub-cache/hosted/pub.dartlang.org/analyzer-3.2.0/lib/dart/ast/ast.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'type'. visit(node.type); ^^^^ ../../.pub-cache/hosted/pub.dartlang.org/dart_style-2.2.3/lib/src/source_visitor.dart:1170:26: Error: The getter 'arguments' isn't defined for the class 'EnumConstantDeclaration'.

'EnumConstantDeclaration' is from 'package:analyzer/dart/ast/ast.dart' ('../../.pub-cache/hosted/pub.dartlang.org/analyzer-3.2.0/lib/dart/ast/ast.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'arguments'. var arguments = node.arguments; ^^^^^^^^^ ../../.pub-cache/hosted/pub.dartlang.org/dart_style-2.2.3/lib/src/source_visitor.dart:1432:16: Error: The getter 'superclass' isn't defined for the class 'ExtendsClause'.

'ExtendsClause' is from 'package:analyzer/dart/ast/ast.dart' ('../../.pub-cache/hosted/pub.dartlang.org/analyzer-3.2.0/lib/dart/ast/ast.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'superclass'. visit(node.superclass); ^^^^^^^^^^ ../../.pub-cache/hosted/pub.dartlang.org/dart_style-2.2.3/lib/src/source_visitor.dart:2058:51: Error: The getter 'interfaces' isn't defined for the class 'ImplementsClause'.

'ImplementsClause' is from 'package:analyzer/dart/ast/ast.dart' ('../../.pub-cache/hosted/pub.dartlang.org/analyzer-3.2.0/lib/dart/ast/ast.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'interfaces'. _visitCombinator(node.implementsKeyword, node.interfaces); ^^^^^^^^^^ ../../.pub-cache/hosted/pub.dartlang.org/dart_style-2.2.3/lib/src/source_visitor.dart:2323:38: Error: The getter 'superclassConstraints' isn't defined for the class 'OnClause'.

'OnClause' is from 'package:analyzer/dart/ast/ast.dart' ('../../.pub-cache/hosted/pub.dartlang.org/analyzer-3.2.0/lib/dart/ast/ast.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'superclassConstraints'. if (onClause != null && onClause.superclassConstraints.length == 1) { ^^^^^^^^^^^^^^^^^^^^^ ../../.pub-cache/hosted/pub.dartlang.org/dart_style-2.2.3/lib/src/source_visitor.dart:2327:22: Error: The getter 'superclassConstraints' isn't defined for the class 'OnClause'.

'OnClause' is from 'package:analyzer/dart/ast/ast.dart' ('../../.pub-cache/hosted/pub.dartlang.org/analyzer-3.2.0/lib/dart/ast/ast.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'superclassConstraints'. visit(onClause.superclassConstraints.single); ^^^^^^^^^^^^^^^^^^^^^ ../../.pub-cache/hosted/pub.dartlang.org/dart_style-2.2.3/lib/src/source_visitor.dart:2334:38: Error: The getter 'superclassConstraints' isn't defined for the class 'OnClause'.

'OnClause' is from 'package:analyzer/dart/ast/ast.dart' ('../../.pub-cache/hosted/pub.dartlang.org/analyzer-3.2.0/lib/dart/ast/ast.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'superclassConstraints'. if (onClause != null && onClause.superclassConstraints.length > 1) { ^^^^^^^^^^^^^^^^^^^^^ ../../.pub-cache/hosted/pub.dartlang.org/dart_style-2.2.3/lib/src/source_visitor.dart:2385:43: Error: The getter 'superclassConstraints' isn't defined for the class 'OnClause'.

'OnClause' is from 'package:analyzer/dart/ast/ast.dart' ('../../.pub-cache/hosted/pub.dartlang.org/analyzer-3.2.0/lib/dart/ast/ast.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'superclassConstraints'. _visitCombinator(node.onKeyword, node.superclassConstraints); ^^^^^^^^^^^^^^^^^^^^^ ../../.pub-cache/hosted/pub.dartlang.org/dart_style-2.2.3/lib/src/source_visitor.dart:2804:45: Error: The getter 'mixinTypes' isn't defined for the class 'WithClause'.

'WithClause' is from 'package:analyzer/dart/ast/ast.dart' ('../../.pub-cache/hosted/pub.dartlang.org/analyzer-3.2.0/lib/dart/ast/ast.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'mixinTypes'. _visitCombinator(node.withKeyword, node.mixinTypes); ^^^^^^^^^^ pub finished with exit code 1
opened by kitoide 0
Panels unusable due to immediate closing in interaction

When clicking on a left side panel it toggles, when interacting with its contents, it does immediately close, so they are pretty unusable. That also happens on the deployed demo.

opened by appinteractive 0

Owner

Min Zhao

GitHub

Dart-ci-tools - A container image with flutter and various CI tools.

dart-ci-tools Container built from the official Dart image, with various CI tools written in Dart. Project Notes There are tools available to: deploy

1 Jan 12, 2022

All the tools you need to build an app in 2 minutes

All the tools you need to build an app in 2 minutes. This is the main, standard CC Core. The plan is to make this into smaller, independent modules, but for now we are making it all available.

0 Dec 30, 2021

Automatically generate profile picture with random first name and background color. But you can still provide pictures if you have them. As the default color, based on the name of the first letter. :fire: :fire: :fire:

FLUTTER PROFILE PICTURE Automatically generate profile picture with random first name and background color. But you can still provide pictures if you

10 Dec 20, 2022

A simple project that will help you learn how to build a simple face filter app with Flutter and Deep AR

flutter_deepar This is a simple project that will help you learn how to build a simple face filter app with Flutter and Deep AR You can read an articl

mobile software engineer and team leader

3 Mar 11, 2022

My collection of bricks created by me to help you build Flutter projects faster I think.

My collection of bricks created by me to help you build Flutter projects faster I think. ?? Bricks Brick Description Version presentation_layer A bric

12 Nov 15, 2022

My collection of bricks to help you build projects faster or nothing else will 😆

My collection of bricks to help you build projects faster or nothing else will ?? Bricks ?? Brick Description Version annoying_analysis_options A bric

4 Aug 20, 2022

SoundVolumeView that displays general information and the current volume level for all active sound components in your system, and allows you to instantly mute and unmute them

4 Mar 4, 2022

Movies4u app UI is simple enough to use and the app is a fun way to get an overview of your movie experience. This repo created with help of awesome UI, material Design and latest feature. this repo contain major feature like : dark theme.

Moviesfree4U This is simple repository, that help in fetch latest, upcomming movies. Website https://movies4u-ef56f.firebaseapp.com/#/ https://movies4

149 Dec 10, 2022

Easily build your Widgets, Avoid parenthesis nesting, easy to build UI, A little like swift-ui.

tenon_mortise Easily build your Widgets, Avoid parenthesis nesting, easy to build UI, A little like swift-ui. Getting Started Usage To use this plugin

4 Dec 15, 2022

A build system for Dart written in Dart

These packages provide libraries for generating, compiling and serving Dart code. Getting started with build_runner General FAQ Windows FAQ FAQ for Bu

676 Dec 24, 2022