Flutter Best Practices Google Is Hiding, DevOPS Storybook UX Testing

One of the recent trends in UX testing was invented in the React space, namely to isolate widget visual testing as implemented via Storybook. The reason why it took off is that the normal task of the front end developer is to take SDK widgets and customize them for the App UX and Brand UX.

And what makes it real nice if the Storybook UX testing is implemented in the right way in the front-end developer workflow is if the test auto generate the visual artifacts of the test and auto generate the UX stories.

Let me show you how to use the Playbook packages to set up Storybook UX testing for Flutter.

The Playbook Packages

First, let me clue you in to how the project should be set up:

You will set up a package within your app folder that holds the custom widgets for your app. Then you will set up a catalog app within your app folder that will hold the playbook app and testing. And obviously since we want to share themes with both the app and the playbook testing you should set up a themes package within your app folder.