Overview
Widgetbook is a Flutter package inspired by Storybook.js that simplifies the process of cataloging widgets to create your own design system, and testing the widgets across various configurations, like different devices, languages and themes.
Widgetbook is recommended by Google's Flutter team who features us as experts for design systems and designer/developer collaboration.
The Problem
Developing user interfaces in Flutter applications often involves creating and managing numerous widgets. However, developers face several challenges in the process:
-
Keeping the overview of the design system is difficult: Setting up and maintaining the structure for a design system that catalogs every widget is time-consuming. As it's not the core business of a Flutter team, it also distracts the developers from actual feature development.
-
UI flaws: Testing widgets across multiple devices, themes, and settings is time-consuming and prone to errors. When changing existing widgets, it is difficult to detect all resulting UI changes to ensure that all changes look and feel as intended.
-
Collaboration between designers and developers: Designers and developers often work in silos, leading to misunderstandings and inconsistencies between the design and the implementation. This can result in a poor user experience and a lack of trust between the two teams.
The Solution: Widgetbook
-
Build your own design system: Widgetbook's cataloging system helps maintain a cohesive look and feel across applications and platforms, promoting a unified user experience.
-
Build your widgets in isolation: Implement widgets without needing to fuss with data, APIs, or business logic. Use Widgetbook's Addons and Knobs to quickly test your widgets in all relevant configurations.
-
Collaborate between designers and developers: Share your Widgetbook with your design team via Widgetbook Cloud Reviews to ensure that the implementation matches the design.