brianegan/flutter_architecture_samples

★ 8,918DartAudience · developerComplexity · 2/5LicenseSetup · moderate

Mindmap

mindmap
  root((Flutter Arch Samples))
    What it is
      Same app 12 ways
      To-do list app
      Side-by-side comparison
    Architectures shown
      Redux
      BLoC
      MobX
      Provider
    Shared code
      Integration tests
      Data layer abstraction
    Goals
      Learn patterns
      Compare approaches

mindmap root((Flutter Arch Samples)) What it is Same app 12 ways To-do list app Side-by-side comparison Architectures shown Redux BLoC MobX Provider Shared code Integration tests Data layer abstraction Goals Learn patterns Compare approaches

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Compare how the same to-do app is structured in BLoC vs Redux vs Provider to pick the best pattern for your Flutter project.

USE CASE 2

Use the shared integration tests to verify your own Flutter app behaves correctly across state management changes.

USE CASE 3

Study the data layer abstraction to learn how to separate storage logic from UI code in Flutter.

USE CASE 4

Try live web demos of each architecture in a browser before committing to one approach.

Tech stack

DartFlutterReduxBLoCMobX

Getting it running

Difficulty · moderate Time to first run · 30min

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

This repository is a learning reference for developers building apps with Flutter, which is Google's framework for creating mobile and web applications from a single codebase. The central idea is that Flutter gives developers many different ways to organize and structure their code, and that freedom can be confusing. This project shows the same simple app built over a dozen different times, each time using a different approach to organizing state and logic. The app being built in every example is a to-do list, intentionally kept simple so the focus stays on structure rather than features. The same screens, the same behavior, the same data storage code, but twelve different ways of wiring it all together. The approaches range from the most basic tools Flutter provides out of the box, to community packages like Redux, BLoC, MobX, and Signals. Each sample has a live web demo linked in the README so you can try it in a browser without installing anything. The project also includes shared supporting code used by all the samples: a set of integration tests that run against every implementation to confirm they all behave the same way, and a data layer abstraction for loading and saving to-do items that can be backed by local storage, file storage, or a web browser's built-in storage. The goal is to let developers compare approaches side by side. Rather than reading articles arguing for one pattern, you can look at the actual code differences between, say, the Redux version and the Provider version, and decide what fits your team or project. The README is clear that these are not meant to be canonical blueprints to copy directly, because priorities differ across projects. The project was inspired by TodoMVC, a similar comparison site for JavaScript frameworks, and by Android Architecture Blueprints from Google. All code in the repository is MIT licensed.

Copy-paste prompts

Prompt 1

I am new to Flutter and confused by state management options. Walk me through the difference between the Provider and BLoC implementations in flutter_architecture_samples using the to-do app as an example.

Prompt 2

Show me how the Redux implementation in flutter_architecture_samples wires up the store, actions, and reducers for adding a to-do item.

Prompt 3

I want to use MobX in my Flutter app. Based on the flutter_architecture_samples MobX example, show me how to define an observable list and react to changes in the UI.

Prompt 4

What is the shared data abstraction in flutter_architecture_samples and how would I replace the local storage backend with a remote API?

Open on GitHub → Explain another repo

← brianegan on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.