I will not lie when I say that Flutter comes really easy for us and lets our imagination run wild on the canvas. And the hot reload features come to really help when we need to iterate fast enough to approve the design-to-app cycle. Although this is done fast enough, we still need to keep the design intact and any change to the implementation has to go through the approval process again.

Before we start, I want to point out what are you in for. A storyboard is a place where you can place all your app widgets and use them as-is in your application.

Okay, let’s start?

Okay, I hear you. I am going straight in! You want the BORING style. Let’s have it.

Features of the Flutter Storyboard:

Reduction in time of Review process. Easy and fast Design-to-app process. Verify how your widget will react to changing themes. Copy the code of the widget for easy implementation [TODO].

Resources:

Flutter Storyboard Playstore Link (Don’t forget to give a nice review) Flutter Storyboard Github Repository (Don’t forget to star it) Flutter Storyboard Web Application (Don’t forget)

I couldn't finish 9 lines like this. I like being DRAMATIC. I am sure you are going to want to read this to the end. Thank me later.

The Problem:

After a lot of UX and UI studies and research, our design team finalized a design pattern and a hell lot of screens. Our application was to be made from scratch and all the screens were being re-thought and re-made. And this had to be implemented in Flutter, all from scratch.

We started out with building common elements of the application and started the review process of the widgets that were built. The review process went fine.

But some changes were introduced by the business team and had to be inculcated in the Design Process and the implementation. This meant that we had to go through the review process again. And if more changes were to come this would become a hell lot more difficult and time-consuming and almost impossible to complete the given tasks in the running sprint or the tasks had to be moved to backlog.

The Solution:

We searched for solutions but couldn’t come up with anything. And so we decided to build something of our own. Just like React has its own Storybook, we decided to build something like that for mobile (And for Web). This would make the process of review easier for the design team to see their design in action and for the dev team to let the burden off their shoulders.

Solution Part 1:

First off, we decided on how the Widget Structure would be laid out so that it becomes easier for review and understanding. And so we came up with this structure.