Flutter Gems

Browse 4600+ useful Dart & Flutter packages that are neatly categorized!

Twitter Subscribe Medium LinkedIn

Top Flutter Storybook and Component Driven UI packages

Component driven UI development is a methodology for building user interfaces that focuses on creating self-contained, reusable components. Or in terms of Flutter, we can say every component of UI, i.e., a widget is built in isolation. Thus, you don't need to spin up the whole Flutter app just to see how they render. You can render a specific variation in isolation by passing in props, mocking data, or faking events. This approach can help to make your code more maintainable and testable, and can make it easier to create complex UIs.

This development paradigm was made popular by Storybook.js and Flutter packages like Storybook, Dashbook, Widgetbook, etc. have made it possible for Flutter developers.

The complete list of Component Driven UI development Flutter packages is provided below.


widgetbook Card Image
widgetbook
Null safety 👍 247

A flutter storybook that helps professionals and teams to catalogue their widgets.

storybook_flutter Card Image
storybook_flutter
Null safety 👍 170

A storybook for Flutter widgets. Live preview of isolated widgets for faster development and showcase.

dashbook Card Image
dashbook
Null safety 👍 74

A showcase/sandbox library to help you build isolated widgets in Flutter

monarch
Null safety 👍 53

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
Null safety 👍 31

A storyboard tool to accelerate the development of Flutter widgets.

storyboard
Null safety 👍 27

Faster iterative development of Flutter user interfaces by isolating widgets from your app.

widgetbook_generator
Null safety 👍 12

A package to automate setup and maintanance of the widgetbook package by using code generation.

storybook_device_preview
Null safety 👍 11

A plugin for device_preview package that allows to embed storybook_flutter.

widgetbook_annotation
Null safety 👍 8

A package featuring the annotations used by widgetbook_generator.

monarch_annotations
Null safety 👍 7

Annotations for Monarch. Monarch is a tool for building Flutter widgets in isolation. It makes it easy to build, test and debug complex UIs.

widgetbook_models
Null safety 👍 2

A package that combines commonly used models from the widgetbook packages.