Multiple Counters Flutter

Flutter State Management

This is a sample app showing four different approaches to managing state in Flutter:

setState vs StreamBuilder vs scoped_model vs redux

Use case: manage multiple counters, synced with Firebase Database.

Watch my video for a full overview of the differences and tradeoffs between these techniques:

Supported tasks:

  • Show a list of counters
  • Add new counters
  • Increment or decrement existing counters
  • Remove counters (swipe left to dismiss)


The app uses Firebase as a source of truth for the state of the counters. This allows the data to be easily synced across multiple clients. Realtime Database and Cloud Firestore are both supported (see database.dart class).

NOTE: For simplicity, the whole database has public read/write access, and counters can't be set per-user. For a production app it would be more appropriate to set user access rules.

State management

The same functionality is replicated in four different pages accessible via the bottom navigation bar, using different state management techniques:

Running the project

You need to register the project with your own Firebase account.

  • Use com.musevisions.multipleCountersFlutter as your bundle / application ID when generating the Firebase project.

  • Download the ios/Runner/GoogleService-Info.plist and android/app/google-services.json files as needed.

For more articles and video tutorials, check out Coding With Flutter.

License: MIT

• Released: May 09, 2020, 01:08 AM

Multiple Counters Flutter

Author: bizz84
Item was Featured Author was Featured Bought between 100 and 500 items Referred more than 1000 members Author had a Free File of the Month Contributed a Blog Post Helped protect FrontendFun against copyright violations Reviewer FrontendFun Developer Site Administrator Moderator Blog Editor
Flutter State Management [ setState ❖ StreamBuilder ❖ scoped_model ❖ redux ] size
git clone