Embracing data binding with MVVM in Flutter

One of the evolutions of the MVC pattern is MVVM, which stands for Model-View-ViewModel. It has the already familiar Model and View. But instead of a Controller, it has another mediator – the ViewModel. Its relationship with the View is heavily based on a concept called data binding.

Data binding is a technique that allows us to bind data between two notions: one that provides the data and one that consumes the data, in a way that if the data in the provider changes, it is automatically displayed in the consumer data. Let’s take a look at a diagram that highlights this communication:

Figure 4.3 – Data flow among the MVVM components

The declarative and reactive design of the Flutter framework has this behavior out of the box. Because we declaratively build our UI as a reaction to state changes, there is no need for us to manually, imperatively update our View. For example, in a vanilla...