widgetbook
<div align="center"> <img src="https://github.com/widgetbook/widgetbook/blob/main/assets/logo.webp?raw=true" height="80" alt="Widgetbook Logo" /> <h1>Widgetbook</h1> <a href="https://pub.dev/packages/widgetbook"> <img src="https://img.shields.io/pub/v/widgetbook" /> </a> <a href="https://github.com/widgetbook/widgetbook/blob/main/LICENSE"> <img src="https://img.shields.io/badge/license-MIT-blue" /> </a> <a href="https://discord.com/invite/zT4AMStAJA"> <img alt="Discord" src="https://img.shields.io/discord/879618555560218625?color=blue&logo=discord"> </a> <br /> <p>Build Flutter widgets and screens in isolation</p> <a href="https://www.widgetbook.io/">Website</a> <span> • </span> <a href="https://docs.widgetbook.io/">Docs</a> <span> • </span> <a href="https://demo.widgetbook.io/">Demo</a> <span> • </span> <a href="https://x.com/widgetbook_io">X</a> <span> • </span> <a href="https://www.youtube.com/channel/UCiOhf9g0J_0mG1YZG9u50rw">Youtube</a> <br /> <br /> </div> 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. [](https://demo.widgetbook.io/) ### 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](https://youtu.be/sGRetvJ-zZI) from Google's Flutter team. ### Getting started Follow our [Setup & Install Guide](https://docs.widgetbook.io/quick-start) in our [docs](https://docs.widgetbook.io). ## 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. [](https://youtu.be/l3tj9VvkjLs) ### 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](https://youtu.be/l3tj9VvkjLs). ### Getting started Widgetbook Cloud has a free tier. [Sign up](https://app.widgetbook.io/sign-up) and and follow our [docs](https://docs.widgetbook.io/cloud). ## Contributing Contributions are very welcome!💙 Please check our [Contribution Docs](https://docs.widgetbook.io/contribution/ways-to-contribute).