MVP

Mode-View-Presenter a derivative form of the MVC pattern that has been for a long time the golden architecture pattern for Android developers. with a single relationship between the Model and the Presenter and a dual relationship between the presenter and the view, the Model and the View remain separated apart. Now this pattern is considered the silver pattern because it has been dethroned by the next one the list MVVM.

MVVM

Model-View-ViewModel. ViewModel shot dead the Presenter. With libraries for DataBinding and LiveData, the MVVM become so powerful and produce such an elegant code that I personally was astonished the first time I came across it. If you still never came across this I suggest this 7 minutes Medium article

Redux

Redux architecture revolves a strict unidirectional data flow which means all data of your application follows the same lifecycle pattern. If you are a React developer or you want to become one please read more about this pattern. This Design pattern is mainly composed of Actions, Reducers, and Presentational Components and Store. If you want to know more about this particular subject find here a simple Todo List app as an example of how to use Redux. 

BLOC with Flutter

Being a Flutter enthusiastic, BLOC (Business LOgic Component) is the design pattern that I am the most excited about. The way Bloc works you can compare it to a black box that takes an event is an input, and it output Streams. I personally find this very performant decomposition of the code especially if the team does have dev that performs better with UI implementation that allows to have some kind of separation between work done of the UI and works done into the business logic layer.
In the rest of this blog post. I assume that you know Flutter and you are you know that everything is a widget from now on.
I am going to teach you more about bloc when, why and how to use it into your flutter app.

Why and When using BLOC?

When you are working on a project that has multiple features and a big UI widget tree the mixture between stateful and stateless widgets alone is going to harm your performance because data will need to be passed into that big tree of widgets and that can make your state management hard and messy. that’s why Google developers recommendation calls it a state management system for Flutter. Also it worth to mention that you can use it if you are familiar with the MVP and the MVVM architecture because BLOC does co-relate with them the only thing that change, when you implement it with an MVVM, is that the ViewModel gets replaced by BLOC.

How to implement BLOC?

Let me take you through the journey of Creating a small app with BLOC. Let’s pretend that we are working on a todo list app.
There are 6 things we need to implement in our bloc class: Create a list of todo, create a stream controller, implement your business logic, create stream getters, create Constructor, and at the end never forget to dispose your streams.

Create a List of todo I hardcoded the list in this tutorial to keep things simple. this is usually some data from different API’s or databases.  

//TODO: List the TODOs

List<Todo> _todoList = [

  Todo(0, “todo number 1”, false),

  Todo(1, “todo number 2”, false),

  Todo(2, “todo number 3”, false),

  Todo(3, “todo number 4”, false),

  Todo(4, “todo number 5”, false),

  Todo(5, “todo number 6”, false),

];

Consider the Stream controller as a class that has methods as stream and sink. to understand it better. Sink is to add data in the data flow and Stream is to get data from a data flow.

//TODO: Stream controller

final _todoListStreamController = StreamController<List<Todo>>();

final _todoChangeStateStreamController = StreamController<Todo>();

Our code feature here is pretty simple all it needs is to change a todo from pending to do. The private function change state change the status of any to-do item from pending to done or from done to pending 

//TODO: Code functions

void _changeState(Todo todo){

  _todoList[todo.id].state= !todo.state;

  todoListSink.add(_todoList);

}

As you may have noticed the streams in here are private so to use them elsewhere we need to implement getters and setters. And this can a little bit tricky when you want to implement the getters.

//TODO:Stream Sink getter

Stream<List<Todo>> get todoListStream => _todoListStreamController.stream;

StreamSink<List<Todo>> get todoListSink => _todoListStreamController.sink;

StreamSink<Todo> get todoChangeState=>_todoChangeStateStreamController.sink;

As you may have noticed the streams in here are private so to use them elsewhere we need to implement getters and setters. And this can a little bit tricky when you want to implement the getters.

//TODO: Constructer

TodoBloc(){

  _todoListStreamController.add(_todoList);

  _todoChangeStateStreamController.stream.listen(_changeState);

}

Each stream that you create allocate memory and resources, to avoid memory leaks and performance issue always implement a dispose function when you close all Streams that you are listening to. You can name this function what even you want to but since on the widget, you can overwrite the dispose function. so naming it “dispose” make more sense then close or something else.

//TODO: Dispose impletentation

void dispose(){

  _todoListStreamController.close();

  _todoChangeStateStreamController.close();

}

After that, we are done creating the TodoBloc Class. you can start using the data streams from bloc into your UI buy the use of the widget SteamBuilder.