TodoMVC for Flutter!
Flutter provides a lot of flexibility in deciding how to organize and architect your apps. While this freedom is very valuable, it can also lead to apps with large classes, inconsistent naming schemes, as well as mismatching or missing architectures. These types of issues can make testing, maintaining and extending your apps difficult.
The Flutter Architecture Samples project demonstrates strategies to help solve or avoid these common problems. This project implements the same app using different architectural concepts and tools.
You can use the samples in this project as a learning reference, as a roughly apples-to-apples comparison of different approaches, or as a starting point for creating your own apps. The focus of this project is on demonstrating how to structure your code, design your architecture, and the eventual impact of adopting these patterns on testing and maintaining your app. You can use the techniques demonstrated here in many different ways to build apps. Your own particular priorities will impact how you implement the concepts in these projects, so you should not consider these samples to be canonical examples. To ensure the focus is kept on the aims described above, the app uses a simple UI.
- Vanilla Lifting State Up Example (Web Demo) - Uses the tools Flutter provides out of the box to manage app state.
- InheritedWidget Example (Web Demo) - Uses an InheritedWidget to pass app state down the widget hierarchy.
- Change Notifier + Provider Example (Web Demo) - Uses the ChangeNotifier class from Flutter with provider package now recommended by the Flutter team.
- Freezed + Provider + Value Notifier (Web Demo) - Uses the ValueNotifier class from Flutter with provider package.
- BLoC Example (Web Demo) - An implementation of the original BLoC pattern described by Paolo Soares at DartConf 2018, which uses Sinks for Inputs and Streams for Outputs
- Bloc Library Example (Web Demo) - Uses the bloc and flutter_bloc libraries to manage app state and update Widgets.
- MobX Example (Web Demo) - Uses the MobX library to manage app state and update widgets using
Observables,ActionsandReactions. - Redux Example (Web Demo) - Uses the Redux library to manage app state and update Widgets
- "Simple" BLoC Example (Web Demo) - Similar to the BLoC pattern, but uses Functions for Inputs and Streams for Outputs. Results in far less code compared to original BLoC pattern if code sharing with AngularDart apps isn't an important use case for your app.
- Signals Example (Web Demo) - Uses the Signals package by Rody Davis.
- MVI Example (Web Demo) - Uses the concepts from Cycle.JS and applies them to Flutter.
- scoped_model Example (Web Demo) - Uses the scoped_model library to hold app state and notify Widgets of Updates
- integration_tests - Demonstrates how to write selenium-style integration (aka end to end) tests using the Page Object Model. This test suite is run against all samples.
- todos_repository_core - Defines the core abstract classes for loading and saving data so that storage can be implemented in various ways, such as file storage or firebase for mobile projects, or window.localStorage for web projects.
- todos_repository_local_storage - Implements the todos repository using the file system, window.localStorage, and SharedPreferences as the data source.
cd <sample_directory>
flutter run
The app in this project aims to be as simple as possible while still showcasing different design decisions and testing scenarios. For more information, see the app's specification.
This Repo is meant as a discussion platform for various architectures. Let us debate these ideas vigorously, but let us be excellent to each other in the process!
While healthy debate and contributions are very welcome, trolls are not. Read the code of conduct for detailed information.
Feel free to join in the discussion, file issues, and we'd love to have more samples added! Please read the CONTRIBUTING file for guidance :)
All code in this repo is MIT licensed.
All of these ideas and even some of the language are directly influenced by two projects:
- TodoMVC - A Todo App implemented in various JS frameworks
- Android Architecture Blueprints - A similar concept, but for Android! The UI and app spec was highly inspired by their example.
- Brian Egan
- Maurice McCabe
- David Marne
- Pascal Welsch
- Larry King
- Frank Harper
- Pavel Shilyagov
- Leo Cavalcante
- Greg Perry
- Felix Angelov
- Francesco Mineo
- Pavan Podila
- Kushagra Saxena
- Shakib Hossain
- Mellati Fatah
I'd like to thank all of the folks who have helped write new samples, improve the current implementations, and added documentation! You're amazing! :)
