We continue to receive great feedback from the Parabeac Core community on how to make our design to Flutter code converter better. Our community told us that they need the code output to configure with their preferred state management architecture. We are happy now to make that happen by converting designs into the boilerplate needed to get started with a state management system. Allowing developers to further focus on business logic rather than cleaning code & moving files after a code generation is made.
Parabeac-Core State Management Support
Parabeac's design to Flutter code converter now supports the most popular state management systems: BLoC, Provider and Riverpod (soon).
When Flutter was released, its core team guided developers implementing an app to follow the BLoC structural pattern to help with scalability. This has changed since then and is now pushing Provider. Lastly, many in the Flutter developer community view Riverpod as the likely evolution from Provider.
Recently, we polled the Flutter community on exactly which state management they preferred. Not surprisingly BLoC was the choice of the largest share (47%) more than doubling that of Provider (20%). Riverpod (5%) had a small but still noticeable share. Based on these numbers and the trends we are hearing from our community, we chose to invest some extra work in supporting all three state management systems: BLoC, Provider, and Riverpod.
This new functionality allows developers to customize how the code is being generated for their design pattern of choice.
How it Works
We'll go over how it works on both the design & development sides of things!
Describing States in Sketch/Figma
In the following image, we decided to change the "Click Me Button" to contain states. These states will be 'default', 'orange', & 'green'. You describe these in Sketch/Figma by creating a Symbol and naming them with the convention <name-of-UI-element>/<state-name>.
So in this case the symbols will be named 'mainBtn/default', 'mainBtn/orange', and 'mainBtn/green' like the following.
The last step in Sketch/Figma is to rename the instance, we'll rename to 'ClickMeBtn'.
It's that easy to start describing states, and it is often a convention that designers use to describe the same element in different ways!
How to Configure the State Management System
The first step to having Parabeac-Core convert with the state management system of choice is is specifying the desired state management configuration. To edit the state management configuration, you need to open the "configuration.json" file under the configuration folder. In there, there is going to be a field called "state-management". This is the location where we can specify our configuration of choice.
As of right now, these are the options:
- "bloc" - BLoC state management configuration
- "provider" - Provider state management configuration
- "none" - No state management configuration
- Soon: "riverpod" - Riverpod State Management Configuration
BLoC Support
To use BLoC, enter "bloc" in the configurations.json file and run Parabeac-Core.
To further understand what Parabeac-Core does, we decided to show some examples of how the boilerplate is created and how easy it is for a developer to add their business logic afterwards. After conversion, you can see the BLoC folder generated under the "view" folder. Within this folder, you can see the different states, the event's skeleton, and the BLoC itself.
To use these states, we can define the possible states within the states file like the following.
The "BlueBtnClicked" event represents an event where a user taps on the button and the button turns blue. The same logic is similar for the rest of the events.
Within the "bloc" file, the developer can map each of the events to any of the available states.
This method is now making the connections between the available states.
The "states file" contains the generated states you defined in Sketch/Figma.
Each of the classes map directly to the state designed in Sketch/Figma. We have the "MainBtnDefaultState", "MainBtnOrangeState", and the "MainBtnGreenState".
Lastly, as the developer we can now add actions.
If you see the "onTap" function, we "add" an event depending on the current state. The causes the button to appear blue, then orange, then green, and repeat.
Provider Support
To use Provider instead of BLoC, all you have to do is go back to the configuration file and change the field to "provider" and run Parabeac-Core.
Once generated, we can see that we get a new folder, the "models" folder. This folder contains the different states we defined; each model represents a UI element with different states.
The developer can then define the actions that will transition the states. We added the following --
With a small change to main() we are good to go with Provider.
Riverpod Support
We want to release with what we have to get this out to developers to play with as quickly as possible. Given the architecture that was built, it is relatively easy to add a new state management system and we hope to have Riverpod as an iterative release within the next 2 weeks. Stay tuned!
Other
You can also create your own! Check out this wiki page to learn how to make your own or reach out to us in our discord community for help on making one!
Wrapping Up
We aim to constantly increase the impact Parabeac Core can have within our community. Since every developer team has their own architecture preferences, we have created a flexible infrastructure so the community can use BLoC, Provider, Riverpod, or easily create & add their own to Parabeac Core.
Your feedback has been critical to our early success. Let us know how we are doing!
Latest comments (0)