If you’re working on a Flutter app, odds are you’re going to need to implement login.

In this article we’re going to walk through one possible way to implement a login flow which will end up looking something like this.

Login Flow that we’ll be implementing

The first thing we’re going to need to do is add flutter_bloc as a dependency to our new flutter project. Our pubspec.yaml should look something like:

Next, we’re going to need to determine how we’re going to manage the state of our application and create the necessary blocs (business logic components).

bloc high level architecture

In this context, a bloc simply takes a stream of events as input and transforms them into a stream of states as output.

Events are the input to a Bloc. They are commonly UI events such as button presses. Events are dispatched and then converted to States .

States are the output of a Bloc. Presentation components can listen to the stream of states and redraw portions of themselves based on the given state (see BlocBuilder for more details).

Check out the bloc package if you haven’t already.