Storyboarding Widgets in Flutter

While developing a React Native app, a tool I found very useful was Storybook, which allows developers to write small isolated “stories” involving widgets. These stories, especially when teamed with a hot deploy mechanism, allows quick iteration of widget design, and also promotes improved reusability and testability of your widgets.

Now I’m developing for Flutter and I sought an analogue to Storybook. The bad news was that I didn’t find one; the great news is that Flutter’s built-in hot reload and tooling support makes rolling your own storyboards simple. As simple as it is, I’ve published my version as a Flutter dart package, making it easy to begin incorporating storyboards into your own dev cycle.

What is a Storyboard

The goal of a storyboard is to stage a collection of Widgets outside their normal app context. By repeating the same widget in various configurations or states in a single view, the effect of code changes to the Widget can quickly be assessed. This is especially useful for cosmetic changes, but also effective for behavior changes.

A Simple Storyboard

A simple DIY storyboard can easily be created by making a Material App consisting of a basic scaffold holding a single widget.

Even such a simple example has a lot of power when teamed with Flutter’s amazing hot-reload. We can evolve our widget incrementally using this simple app, quickly observing the effect of code changes without the need to run our full app. This exercise is so simple and useful that I suspect many Flutter developers regularly use a similar approach during widget development.

A Less Tedious Storyboard

Building storyboards as above becomes tedious quickly. To remedy this, I developed a small Flutter package to reduce boilerplate and make it easier to build Storyboards consisting of multiple “Stories.”

The code is rather trivial, actually; the magic is all built into Flutter itself. So if you’d like to start storyboarding, then head straight to the Pub. Otherwise, I’ll give a brief explanation of how the package works.

The basic building block of the package is the abstract Story class. A developer will create a story by creating concrete implementations of this class. The only method requiring overriding is get storyContent, which is where the widgets to be observed are defined.

The Story class includes logic necessary to render itself and its widget children, either in a vertical list or in a separate route (if the Story overrides isFullScreen as true). The build method itself can be overridden if more precise control of rendering is required.

Here’s a simple story that shows off a widget using different configurations.

Multiple stories are bundled together to build a Storyboard, a widget that renders a scaffold with its children in a simple List view.

Here’s an example of running a simple Storyboard.

And here’s how it looks in action with hot reload:

Integration Testing

Storyboards can easily do double duty as scaffolding for integration testing using flutter_driver. As part of your integration workflow, an integration test can drive a storyboard, generating performance metrics and screenshots along the way. See Flutter docs for more info.

Conclusion

Although it’s already apparent that Flutter is something very special, there is currently a dearth of the normal supporting cast of developer tools that come with a mature platform. This lightweight storyboarding technique leverages Flutter’s top-tier mobile developer experience to easily build the seed of a valuable dev tool.

Source

See the Storyboard package on Dart pub.