[GROOMING] Story book / Widgetbook

[nqhhdev]

Docs

Widgetbook

• https://www.widgetbook.io/
• https://pub.dev/packages/widgetbook

Storybook

• https://pub.dev/packages/storybook_flutter

DoD

• What is this?
• How to implement on project?
• What are its benefits?

[nqhhdev]

Widgetbook and Storybook for Flutter are tools aimed at improving the development experience by allowing you to develop, test, and showcase individual widgets in isolation.

Widgetbook for Flutter:

Widgetbook is a Flutter-specific tool similar to Storybook for React. It helps developers build UIs in isolation, with a primary focus on Flutter widgets. Some of its features include:

• Widget Isolation: You can develop and test Flutter widgets individually without having to run the whole app, improving iteration speed.
• Hot Reload and Preview: It integrates with Flutter's hot reload, allowing you to see changes to your widgets immediately.
• Device Previews: It offers different device previews to ensure your widget works well on various screen sizes and platforms.
• Theming: You can test your widgets in light/dark modes and with different themes.
• Collaboration: Widgetbook supports collaboration, making it easy to share and review your UI components across teams.

Storybook for Flutter:

Storybook is a well-known tool in the React world, and there’s a Flutter version that brings a similar experience to Flutter developers. Storybook for Flutter allows you to create "stories" for individual UI components, providing a playground to visualize the states of your widgets. Features include:

• Component-based Development: Build widgets as standalone components and write stories to define their different states.
• Live Preview: Similar to Widgetbook, Storybook lets you preview your widget in different states and themes.
• Add-ons: You can extend functionality through add-ons, such as accessibility checks or responsive previews.
• Cross-platform: Though designed primarily for web, the Flutter version also supports building widgets for different platforms like mobile or desktop.

Differences:

• Focus: Widgetbook is specifically built for Flutter, so it integrates more natively with Flutter's tools and workflow. Storybook is more cross-platform, and although there's a Flutter implementation, it might not be as tightly integrated as Widgetbook.
• Collaboration: Widgetbook emphasizes collaboration between teams, whereas Storybook’s collaboration features are more dependent on add-ons or third-party integrations.