Observer in Flutter
In reactive programming, there is an entity that sends events and there is another entity that subscribes to those events, it does not matter if there are 1 or thousands, but we will be listening for changes in that data. And we are simply going to react to those events.
The Observer pattern helps us to subscribe to some events of a Class and get notifications. This means that there is someone who emits data and another who is going to listen to it. Whoever emits the data is simply in charge of sending it to whoever is subscribed to that data and nothing more. The entities that are listening can be removed or put on, and for the other entity it is totally transparent.
Benefits
- Abstract coupling between Subject and Observer. All a subject knows is that it has a list of observers, each conforming to the simple interface of the abstract Observer class. The subject doesn’t know the concrete class of any observer. Thus the coupling between subjects and observers is abstract and minimal.
- Support for broadcast communication. Unlike an ordinary request, the notification that a subject sends needn’t specify its receiver. The notification is broadcast automatically to all interested objects that subscribed to it. The subject doesn’t care how many interested objects exist; its only responsibility is to notify its observers. This gives you the freedom to add and remove observers at any time. It’s up to the observer to handle or ignore a notification.
Inconvenients
- Unexpected updates. Because observers have no knowledge of each other’s presence, they can be blind to the ultimate cost of changing the subject. A seemingly innocuous operation on the subject may cause a cascade of updates to observers and their dependent objects. Moreover, dependency criteria that aren’t well-defined or maintained usually lead to spurious updates, which can be hard to track down.
When to use it?
Use the Observer pattern:
- When multiple views depend on a data, we can subscribe to the events of that data, and when it changes, we reactively update all views.
- When an abstraction has two aspects, one dependent on the other. Encapsulating these aspects in separate objects lets you vary and reuse them independently.
- When a change to one object requires changing others, and you don’t know how many objects need to be changed.
- When an object should be able to notify other objects without making assumptions about who these objects are. In other words, you don’t want these objects tightly coupled.
Observer in Flutter
For our example, we are going to start by creating two interfaces or Abstract Classes in Dart, which will help us delegate communication between Classes. The first is the Observable and the other is the Observer.
The Observer will be the one that will notify all the events of the Observable. Here we are going to have certain functions, the main one is to add an observer. We also create a function to remove the observer. And finally we are going to notify them, that is, notify that a value has changed, in this case a double.
The Observer is in charge of notifying the change. With these two interfaces we already have that the Observable is going to receive an Observer and we are going to subscribe or unsubscribe it. When the Observable is going to notify a change, it does so through the notifyObservers method and the Observer will have a callback that will notify the change.
Now we create a Class AvailableBalanceObservable that is in charge of handling the available balance events. In this class we implement the Observable. This forces us to implement the addObserver, removeObserver, and notifyObservers methods.
To register the observers, we must save them in memory, for this we create a variable _amountObserverList where we have the list of our Observers. Similarly to remove an observer.
When we are going to generate a change and we are going to notify everyone, what we do is that we notify each of the Observers that we have.
Now we create the function to change the available balance. When we update the amount, we also notify the Observers.
Finally we create a simple screen where we implement our Observer.
Finally what you were waiting for, here you can find the complete example:
More Design Patterns in Flutter:
If you like it, you can Buy Me A Coffee!
