Widgetbook

Build Flutter widgets and screens in isolation

Website   •   Docs   •   Demo   •   X   •   Youtube

The open-source Widgetbook is a sandbox for building widgets and screens in isolation. It helps you develop and share hard-to-reach states and edge cases without needing to run your whole app. Inspired by Storybook.js.

Features

• 🧱 Build UI components and pages in isolation. Implement components and pages without needing to fuss with data, APIs, or business logic.
• 👀 Mock hard-to-reach edge cases. Render widgets in key states that are tricky to reproduce in an app. Then save those states as use-case to revisit during development, testing, and QA.
• 📙 Catalog all of your widgets. Create your own widget library providing you with a great overview of what you have already built.

Demo

🎥 Watch a 2-minute demo video from Google's Flutter team.

Getting started

Follow our Setup & Install Guide in our docs.

Widgetbook Cloud

Widgetbook Cloud is a managed hosting solution for Widgetbook that allows you to run golden tests to detect and review all UI changes in your pull-request. Inspired by Chromatic.

Features

• 🌍 Share your Widgetbook with your team. Publish your Widgetbook build for other Developers, Designers, PMs or Clients to reference. Everyone can check that the UI looks right without touching code.
• 🏅 Golden Tests. Run zero-configuration golden tests (visual regression tests) on your widgets across all states, devices, themes, text scale factors, etc. to detect all changes.
• 🧪 Visual Pull Requests. Detect and review all UI changes in your pull-request.
• 🎨 Figma Reviews. Connect your your Figma designs to review your Flutter widget next to the original Figma design.

Demo

🎥 Watch a 1-minute demo video.

Getting started

Widgetbook Cloud has a free tier. Sign up and and follow our docs.

Contributing

Contributions are very welcome!💙 Please check our Contribution Docs.