flutter_design_viewer

The viewer is a very powerful tool that you can use to visualize your designs across multiple devices/themes/locales frames across multiple platforms (e.g. to run in the web for accessibility and bigger screens). You can very well use it standalone without the other packages.

Some of the ideas are taken from Storybook: UI component explorer for frontend developers and https://design.wonderflow.ai/

Here is an overview of the key components:

• Viewer app: the main widget that can be directly used in the user’s app. Allows the user to configure the following properties:

  • Settings: settings of the viewer

    • Supported devices: by default all the devices from flutter_device_preview

    • Supported locales: by default en_US

    • Supported themes: by default the Material.light() and Material.dark()

  • Pages: the viewer consists of pages organized in a tree structure for the user to navigate. There are 3 types of pages:

    • Group: a simple group header that serves as root pages.

    • Documentation: pure documentation page in Markdown to be shown in the design system, e.g. Getting Started, code guidelines, etc.

    • Catalog: rich interactive pages be shown in the design system

      • Component catalogs: list of component catalogs, the user can put separately created catalogs and/or the generated component catalogs from the codegen.

      • Prototype catalogs: list of catalogs that are intended to be more complex and advanced for specific use-cases, etc.

• Viewer explorer: (internal) the viewer explorer exposes the tree structure of the design system documentation & catalogs which allow users to navigate, search for content in a tree structure. There are 3 types of documents

  • Markdown document: pure documentation file in markdown format

  • Flutter design document: Flutter rendered design document via declarative documentation.

  • @design generated flutter design document: Flutter rendered design document via @design annotations on widget classes, examples, etc.

• Viewer search: (internal) the search engine that allows the user to navigate the catalogs and documentation

  • In-memory: basic in-memory search engine that loads all data statically to perform search

  • Firebase/Algolia*: TBD.

• Viewer data manager: (internal) the data manager generates data from templates

  • Data template: preconfigured data template for a given data type T with a set of meta data which could be used to generate data of type T with/without user input.

  • Data builder: the design viewer comes a preset of data builder (e.g. ColorBuilder, TextBuilder) which the user can also extend by providing custom builders.

• Viewer renderer: (internal) renders the widget catalog in frame(s) next to the source code viewer.

  • Frames: each frame represents a “ux-isolated” MaterialApp that is constrained by a selected MediaQuery. Each frame can either host a set of components in the catalog or host a single full screen component.

    • Device frames: device frames consists of frames with various device specifications and a fixed theme and locale. The device size could be “actual size” or “resized” (to fit the height).

    • Theme frames: theme frames consists of frames with supported themes and a fixed device and locale.

    • Locale frames: locale frames consists of frames with supported locales and a fixed device and theme.

    • Canvas frame: render all widgets on a responsive blank canvas.

  • Component container: the user can adjust the boundary of the component container to check if the layout can handle certain scenarios.

  • Source code viewer: represent the underlying code associated with the widgets

• Viewer synchronizer: (internal) the synchronizer is integrated on each viewer using a leader/follower publishing architecture. It recognizes user events (e.g. tap, drag, scroll) on one frame and synchronize to its listeners (all other connected frames).