Widgetbook, a Flutter Storybook <> DevFest Nairobi 2022

Managing/reviewing Flutter custom-built components can become overwhelming when you work with a team and designers. In many cases, developers would love to view components and screens in insolation which has proven not to be easy. This talk will show you how Widgetbook, an open-source package facilitates the Implementation of components in Isolation, increases overview, improves development, improves visual testing, and enable easy review and accessibility for designers.

Transcript

1. Nairobi Eric Muli Software Developer, Widgetbook @muli_eriq Widgetbook, a Flutter Storybook
3. 1. Developer lose overview of which components exists 2. For developers it’s hard to implement components exists 3. For designers it’s hard to review implemented Flutter components. Problems developers and designers face
4. What is Widgetbook ?
5. Widgetbook is a collaboration platform for UI/UX designers and Flutter developers. Widgetbook enables Flutter teams to build beautiful apps by aligning design and code.
6. So how does Widgetbook solve the problem ?
7. Widgetbook Open Source Package This is a flutter package which helps developers to ; • Catalogue their widgets, • Build widgets in isolation , • Test widgets in different configurations
8. Widgetbook Cloud Widgetbook Cloud is the collaboration platform for Flutter teams which offers: • Hosting to easily share the Widgetbook with designers • Visual review of the changed Flutter components within a pull-request
9. Steps to get started with Widgetbook First,add widgetbook as a dev dependency to your pubspec.yaml file
10. 1. Creating a Widgetbook with mason
11. 2. Creating a Widgetbook manually Since the widgetbook is launched as a separate app, it is recommended to create another main method. This is to enable to switch between your app and widgetbook at any time .You can even launch your app and widgetbook simultaneously. The folder structure might look like this; While developers can use the manual setup, we advise to use the generator.
12. 3. Creating a Widgetbook using annotations and generator Widgetbook provides widgetbook_annotation and widgetbook_generator, which allows to generate and set up code for the widgetbook package which simplifies using and maintaining widgetbook
13. Talk is cheap, show me the code Linus Torvalds
14. Nairobi Alena Nicolay Get access to Widgetbook Cloud Book a demo call
15. Nairobi Eric Muli Software Developer, Widgetbook @muli_eriq @widgetbook_io contact@widgetbook.io @muli_eriq eric@widgetbook.io