Adding State Management

State Management in Parabeac Core

In update 1.3.0 we added support for state management systems within Parabeac Core. This means that by adding some additional information to your elements, Parabeac-Core can now automatically generate states for your widgets using either Bloc, Provider, or Riverpods (We plan to add support for more state management libraries soon!). You can add support by simply adding another semantic and enabling State Management in the Parabeac Core Configuration.

Adding State Semantics to Your Elements

Adding state to your elements is as simple as adding the state you want to associate to your symbol using the following structure:

<name-of-UI-element>/<state-name>

And thats it! So let's see what this looks like with an example.

In our case, we'll be creating a new state that we can use to reference the color of a button. We'll define our states as 'default', 'orange', and 'green' to reference the color we want to use. To make things easier, we'll create a new symbol for each of the different states we want to express with our buttons. We'll name each button 'mainBtn/default', 'mainBtn/orange', and 'mainBtn/green' as seen below.

Next we'll name the symbol instance for our state buttons 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!