Flutter Gems
Flutter Gems is a curated list of 7250+ useful Dart & Flutter packages that are categorized based on functionality.
Top Flutter Storybook or Component Driven UI Development packages
Last updated: May 18, 2026
A Storybook is an isolated development environment (a component gallery) that allows UI developers to build, test, and document widgets independently of the main app logic.
Best Practices for Storybooks
- Isolate UI from Logic: Widgets placed in a Storybook must be "dumb." They should rely entirely on passed parameters rather than attempting to fetch data or read global state, ensuring they are perfectly reusable.
- Knobs and Controls: Provide interactive "knobs" (sliders, color pickers, text inputs) in the Storybook UI so designers can tweak variables in real-time and see how the widget responds without changing code.
- Web Deployment: Compile your Storybook environment to Flutter Web and host it internally. This gives your design and QA teams a live, always-updated catalog of the app's design system.
The complete list of Storybook, Component Gallery, and UI Catalog packages for Flutter is provided below.
widgetbook
👍 746 ⬇️ 389.9K
Dart 3 compatibleMaintenance Status: Good
Widgetbook is a sandbox for building widgets and screens in isolation. It helps you develop hard-to-reach states and edge cases without needing to run your app.
storybook_flutter
👍 342 ⬇️ 46.2K
Dart 3 compatibleMaintenance Status: Poor
A storybook for Flutter widgets. Live preview of isolated widgets for faster development and showcase.
widgetbook_annotation
👍 19 ⬇️ 379.3K
Dart 3 compatibleMaintenance Status: Good
A package featuring the annotations used by widgetbook_generator.
widgetbook_generator
👍 20 ⬇️ 264K
Dart 3 compatibleMaintenance Status: Good
A package to automate setup and maintenance of the widgetbook package by using code generation.
dashbook
👍 132 ⬇️ 12.1K
Dart 3 compatibleMaintenance Status: Good
A showcase/sandbox library to help you build isolated widgets in Flutter
monarch
👍 123 ⬇️ 1.5K
Dart 3 compatibleMaintenance Status: Good
Code generator for Monarch. Monarch is a tool for building Flutter widgets in isolation. It makes it easy to build, test and debug complex UIs.
flutterbook
👍 42 ⬇️ 170
Dart 3 compatibleMaintenance Status: Poor
A storyboard tool to accelerate the development of Flutter widgets.
werkbank
👍 30 ⬇️ 837
Dart 3 compatibleMaintenance Status: Good
A powerful tool that helps you develop, test, visualize, and organize your Flutter UI components.
storyboard
👍 27 ⬇️ 222
Dart 3 compatibleMaintenance Status: Poor
Faster iterative development of Flutter user interfaces by isolating widgets from your app.
flutter_design
👍 23 ⬇️ 245
Dart 3 compatibleMaintenance Status: Poor
A complete framework with tools to help you bootstrap your design system.
demoflu
👍 13 ⬇️ 111
Dart 3 compatibleMaintenance Status: Average
Simplify package demonstration with a versatile web application for showcasing widget usage.
monarch_annotations
👍 7 ⬇️ 1.7K
Dart 3 compatibleMaintenance Status: Average
Annotations for Monarch. Monarch is a tool for building Flutter widgets in isolation. It makes it easy to build, test and debug complex UIs.