What Storyboarding in Flutter Will Google Introduce At IO 2024

Fred Grott
3 min readNov 17


I found this package while searching what new stuff Google’s cloud and VSCode powered IDE IDX would bring to the table.

Imagine this storyboarding so easy that you just create scenes of pages and then the storyboard app is auto generated.

But, what if there was more? Such as the benefit of re-using those same storyboarding scenes to then become the BDD on the testing side of the app.

Bryan Oltman earlier this year started a project named stager as a side project as he works for Google. That same project is in the process of being maintained and improved by Google, and it is renamed to Flutter Stager. But, we do not have to wait until Google IO 2024 to learn how to use it as we can use the stager package example to see how it works.

Stager Key Concepts

So let’s start with the scene concept. A scene can be a widget or page but works as a separate unit of UI being mocked. Each scene has a build function with an EnvironmentAwareApp wrapper and a function setUp to set up UI dependencies.

Let’s see an example:

One can also go beyond the default set of environmental controls of setting theme-mode, text scale, etc. like this:

But, since we are mocking to storyboard the UI widget or screen, what about re-using that for BDD testing? Here is a snippet demoing test BDD re-use: