Role Based App Navigation using Bloc Pattern

Image From :blogspot

Bloc Introduction

The bloc pattern is rapidly becoming a favorite among flutter developers. Bloc helps you build reactive mobile applications which delivers quick results to the UI in a well structured, hassle-free architecture.

Bloc stands for Business Logic Component which is used to abstract business logic from the UI logic and still manages state of the application seamlessly.

Bloc acts as an intermediator between the UI and any business logic where it takes events as inputs, interacts with the database or server APIs, calculates a result and returns a state back to the UI to show user with an appropriate result for their actions.

Image From : bloclibrary

Events

Events get sent to bloc as an input to be acted upon. Events can be triggered from user actions like a button click or a need to show some data to the user when they visit a screen.

States

States are sent back to the UI in response to events fired. In response to events triggered, the bloc calculates some results and according emits states that are used to modify the UI to show the users results of their actions.

BlocBuilder

BlocBuilder is use when we need to rebuilt some widget in order to change the state of the UI according to events sent by the user and the state generator thereafter. Whenever a state change happens, it will rebuild all the child widgets with the new state information.

BlocListener

BlocListener is a Flutter widget which invokes its listener in response to state changes from bloc. It should be used for functionality that needs to occur once per state change such as navigation, showing a Snackbar, showing a dialog, etc...

BlocListener is only called once for each state change that happens from the bloc.

BlocProvider

BlocProvider is like an Inherited Widget which provide Bloc to its children. All the widgets in its subtree will have access to the Bloc.

So now, when we know all the basic structure, let’s take an example to understand it better.

Scenario : Considering login screen having option of login as Teacher or Student or there can be more roles such as principal based on advanced requirements. We have to show different home screens to user based on their role. And also have to check if user is registered with our system or not.

Why Bloc is essential for such scenario?

Imagine you are working on huge project where you have to handle screen navigation based on multiple user roles. In this case if it’s done without Bloc it will be very tedious and challenging to handle boiler plate code and you will be required to use setState() heavily based on your logic. Moreover, it creates chaos between UI code and actual business code.

To avoid this the Bloc patterns comes in handy which takes care of each state and handles UI based on it.

Here’s how to structure the code to achieve this scenario with bloc

To get the user role we would need to pass RoleSelected event with login details when the user clicks on the submit button or some other role selection option.

Upon receiving event, the Bloc should successfully save the logged in user’s role in database or shared preferences/keychain and trigger a state change either via TeacherRoleSelected or StudentRoleSelected states. It will return RoleSelectionFailure if user is not authenticated.

Based on these 3 states- TeacherRoleSelected, StudentRoleSelected or RoleSelectionFailure, we can navigate to either Teacher dashboard, Student dashboard or login screens respectively. Or show some failure message in case of failure in saving the role.

Show me the code

A Boolean value is managed to store role selection state. Set isTeacherSelected or isStudentSelected to true based on user selection of teacher or student options.

On click of a submit button (after a role is selected), I fire an event- RoleSelected to be sent to the bloc.

Event triggered on button click-

Bloc takes RoleSelected Event and return states.

Bloc class-

Event class-

State class-

Redirect to specific screen based on selected role-

Conclusion

Bloc pattern is great when your applications needs to update the UI frequently or when you need to set a dynamic flow in your app. It is a great state management technique to handle multiple UI and helps improve the quality of code.