Mastering Flutter: Using BLoC pattern part 2

Welcome back! Here’s the part 2 of our BLoC journey; in this chapter will see how to setup the Sign Up flow of our app. Instead of using a Cubit as we did in the part 1 of this series, we’ll use the pure BLoC.

Note: In this tutorial not much of the UI will be shown since it’s pretty much a copy of the LoginScaffold and LoginForm shown in the p1; the full example will be linked at the end of this article. Even the SignUpState it’s almost identical to our LoginState but for completeness we’ll insert it in this tutorial.

SignUp State

There’s not pretty much more to add about our state so let’s go fast to the main course.

Now that we have our SignUpState defined we need to define the SignUpEvent which our bloc will be reacting to.

SignUp Event

First of all, let’s write our base SignUpEvent, and let’s analyze it:

  • our event is abstract, this means that this class cannot be instantiated and also, declaring it abstract, we ensure that all implementation subclasses define all the properties and methods that abstract class defines.
  • it extends Equatable so we can observe whenever the previous event will be different from the current one and react to this and modify what we need.

Done that we can create all the events that will inform BLoC that something in our sign up has changed, for example that the user inserted a password in our form.

Using BLoC might seems overcomplicated sometimes (and it really is 😅) but you can now start to see how clear all the logic is; you will always know what is happening in your app and which state corresponds to our event! Knowing what happens, using just a single component, may be a real life saviour while developing a Flutter app.

Build the SignUp BLoC

This class should handle everything, in this case I’ve included the form field management, and a mock of an API call but this can include all do you need like CRUD operations with the database.

As you can see all the business is happening in the mapEventToState function,  where you take an event and map it to a state and deliver it to your UI.

If you want to dig more inside BLoC you can override the following methods:

  • onError you can observe if an error happens
  • onTransition contains the currentState, nextState and also the event which triggered the state change.

Tip: even if you don’t care about this method try to implement it and print the transition, it will be really helpful while developing.


Connecting BLoC to UI

If you have read the previous part of this tutorial you know that we are coming to an end, we just need something that can provide this BLoC to our UI and, of course, you already know the answer… its’ the BlocProvider:

Since we are building a Sign Up form we need to know when user has successfully complete all the process and to know that BlocListener comes in rescue:

listener is used here to show an error alert if the submission fails or show our Home Screen if everything went good.

We wrapped each of our forms inside a BlocBuilder because buildWhen let us know exactly when our email is changing and so we can optimize rebuilding of the widget.

Great but… how is the BLoC aware of changes in my textfields?

In this particular case onChanged callback on typing is notifying our BLoC that, for instance, email is changed and to begin all the flow.


The End

This way to implement BLoC is just a drop in the bucket, continue to explore and you will see how many things you can do with this package: you can communicate between blocs, having one bloc that retain all the others… even this part of our journey comes to an end, see you the next time!