Widgetbook - a Flutter Storybook

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. Widgetbook - a Flutter Storybook OIOIOIOIOOOIIIOOIOIOIOIIIIOOIOIOIOIOIOIOOOOIOIOOI OOOIIIOOIOIOIOIIIIOOIOIOIOIOIOIOOOOIIIIIIOIOIIOIOIOO OIIIIIIIOIOIOIIOOOIOIOOOIIIOOIOIOIOIIIIOOIOIOIOIOIOIO OOIOIOOOIIIOOIOIOIOIIIIOOIOIOIOIOIOIOIIIIIOOIOIOIOI OIOIIOIOIOOOIIOIOIOIOIOIOOOIIIOOIOIOIOIIIIOOIOIOIOI OIOOOOIOIOIOIOIOIIOIOIIOIOIOOOIIOIOIOIOIOIOOOIIIO OIOIOIIIIOOIOIOIOIOIOIOOOOIOIOIOIOIOIIOIOIIOIOIOOO OIOIOIOIOOOIIIOOIOIOIOIIIIOOIOIOIOIOIOIIOOIOIOIOIO OIIIIIOOIOOIOIOIOOOOIOIOOIOIOOOIOIOIOOOIIIOOIOI ▲••• ◼︎ ▲• ◼︎ ▲•• ◼︎ • ◼︎ ▲•▲•• ◼︎ ▲•▲ ◼︎ ▲• ◼︎ • ◼︎◼︎▲︎ • ◼︎ ▲▲•• ◼︎ ▲•• ◼︎ ▲ ◼︎ ▲•▲•• ◼︎ ▲•▲ ◼︎ ▲• ◼︎ ▲•• ◼︎ • ◼︎◼︎ ▲• ◼︎ •• ◼︎ •▲•• ◼︎ ▲ •︎ • ◼︎◼︎ ▲•• ◼︎ ▲• ◼︎◼︎ ▲• ◼︎ ▲• ◼︎ • ◼︎◼︎ ▲•• ◼︎ ▲•• ▲︎◼︎◼︎◼︎ •▲• ◼︎ ▲•• ◼︎ • ◼︎◼︎ ▲• ◼︎ • ◼︎ ◼︎▲︎ ▲ •︎ ◼︎▲︎ ▲•• ◼︎ ▲•• ◼︎ •• ◼︎ ••• ◼︎ ▲• ◼︎ ▲•• ◼︎ • ◼︎◼︎ ▲ •• ◼︎ ▲• ◼︎◼︎ ▲•• ◼︎ ▲• ◼︎ ▲•• ◼︎ • ◼︎◼︎ ▲•• ◼︎ ▲• ◼︎ ▲•• ◼︎ • ◼︎◼︎ ▲•• ◼︎ ▲•▲▲•▲ ◼︎ ▲• ◼︎ ▲•• ◼︎ • ◼︎◼︎ ▲•• ◼︎ ▲• ◼︎ •• ◼︎ • ◼︎ ◼︎ ▲•• ◼︎ ▲• ◼︎ ▲•• ◼︎ • ◼︎◼︎▲︎ •• ◼︎ •••• •︎ •• ◼︎ ▲ 1 Eric Muli 
 Software Developer, Widgetbook @muli_eriq
2. UI/UX Design is more important than ever but developers struggle to meet design requirements By 2019, the ratio is 1:8 and even 1:3 for mobile development. In 2012, IBM employed one designer for every 72 engineers. b LET‘S LOOK AT THE 2
3. *Conducted in 100+ interviews with frontend teams Designer spends up to 50% of work time on frontend reviews* Developer spends up to 25% of work time on frontend reviews* Problems in collaboration process #1 Difficult for developer to enable designer to review #2 Difficult for designer to give precise feedback #3 Difficult for developer to understand feedback No dedicated collaboration platform Collaboration between designers and developers is chaotic and time consuming QUANTIFIED PROBLEM
4. What is Widgetbook ? 4
5. Widgetbook is a collabora ti on pla tf orm for UI/UX designers and Flu tt er developers. 5 Widgetbook enables Flu tt er teams to build beau ti ful apps by aligning design and code.
6. One central collaboration platform to align design and code Open Core Developers generate a library of all UI elements using our Open Source Package Hosting Action Developers upload their UI library using our CI/CD action Widgetbook Cloud Designers review all UI elements on our collaboration platform Design Plugins Designers compare implemented UI elements with design files Design Editor Designers test suggestions themselves Chat Designers provide precise feedback and developer can start changing the code with confidence 6 Widgetbook saves time and assures quality Faster review processes and increased software quality
7. 7 Steps to get started with Widgetbook First,add widgetbook as a dev dependency to your pubspec.yaml fi le
8. 8 Creating a Widgetbook with mason
9. 9 Creating a Widgetbook using annotations and generator
10. 10 …. show me the code
11. 11 Get access to Widgetbook Cloud Book a demo call 
 Alena Nicolay Community Manager
12. Let's bridge the gap between design and development together Eric Muli Software Developer widgetbook.io 12 @muli_eriq eric@widgetbook.io