Flutter Community
Published in

Flutter Community

Flutter Design Patterns: 23 — Observer

An overview of the Observer design pattern and its implementation in Dart and Flutter

Table of Contents

  • What is the Observer design pattern?
  • Analysis
  • Implementation
  • Other articles in this series
  • Your contribution

What is the Observer design pattern?

Neale Donald Walsch quote about the observer effect (source)

Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically.

Spoiler alert: if you have ever heard about reactive programming or even used the related frameworks/libraries/tools such as ReactiveX, RxDart or just basic streams in Dart, this design pattern won’t be a game-changer for you. But it is still worth knowing how reactive programming ideas are implemented in the OOP context from the ground up, though.

Analysis

The general structure of the Observer design pattern looks like this:

Structure of the Observer design pattern (source)
  • (Optional) Concrete Publishers — stores state of interest for Concrete Subscribers and sends a notification to its observers when the state changes. This class is optional when only a single type of Publisher is needed. In such case, the state and notification logic is handled by the Publisher;
  • Subscriber (Observer) — declares the notification interface for objects that should be notified of changes in a Subject;
  • Concrete Subscribers — implements the Subscriber (Observer) interface to keep its state consistent with the subject’s state;
  • Client — creates Subject and Observer objects, attaches observers to subject updates.

Observer vs Mediator

If you have read the previous article in the series or are familiar with the Mediator design pattern you could feel some kind of déjà vu — isn’t the Observer design pattern the same thing? Let me explain.

Applicability

The Observer design pattern should be used when a change to one object requires changing others, but you don’t know how many objects need to be changed and how. The pattern allows subscribing to such object events and changing the dependent object’s state accordingly.

Implementation

  • Growing stock subscription — notifies only about the growing stock changes.

Class diagram

The class diagram below shows the implementation of the Observer design pattern:

Class Diagram — Implementation of the Observer design pattern
  • unsubscribe() — unsubscribes from the stock ticker;
  • notifySubscribers() — notifies subscribers about the stock change;
  • setStock() — sets stock value;
  • stopTicker() — stops ticker emitting stock events.

StockTicker

An abstract class implementing base methods for all the specific stock ticker classes. Property title is used in the UI for stock ticker selection, stockTimer periodically emits a new stock value that is stored in the stock property by using the setStock() method. The class also stores a list of stock subscribers that can subscribe to the stock ticker and unsubscribe from it by using the subscribe() and unsubscribe() respectively. Stock ticker subscribers are notified about the value change by calling the notifySubscribers() method. The stock timer could be stopped by calling the stopTicker() method.

stock_ticker.dart

Concrete stock ticker classes

All of the specific stock ticker classes extend the abstract StockTicker class.

gamestop_stock_ticker.dart
tesla_stock_ticker.dart
google_stock_ticker.dart

Stock

A simple class to store information about the stock. Stock class contains data about the stocker ticker symbol, stock change direction, current price and the change amount.

stock.dart

StockTickerSymbol

A special kind of class — enumeration — to define supported stock ticker symbols. Also, there is a StockTickerSymbolExtension defined where the toShortString() method returns a short version of the enumeration string value.

stock_ticker_symbol.dart

StockChangeDirection

A special kind of class — enumeration — to define stock change directions.

stock_change_direction.dart

StockSubscriber

An abstract class containing base properties for all the specific stock ticker classes. Property title is used in the UI for stock subscriber selection, id uniquely identifies the subscriber. Updated stock values are added to the stockStreamController and emitted via the stockStream. Abstract method update() is defined and must be implemented by all the concrete stock subscriber classes.

stock_subscriber.dart

Concrete stock subscriber classes

  • DefaultStockSubscriber — a default stock subscriber that emits every stock change on update.
default_stock_subscriber.dart
growing_stock_subscriber.dart

Example

First of all, a markdown file is prepared and provided as a pattern’s description:

observer_example.dart

Your contribution

👏 Press the clap button below to show your support and motivate me to write better!
💬 Leave a response to this article by providing your insights, comments or wishes for the series.
📢 Share this article with your friends, colleagues on social media.
➕ Follow me on Medium.
⭐ Star the Github repository.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store