TodoMVC for Flutter

Overview

flutter_architecture_samples

Build Status Build Status codecov

List of Todos Screen

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, 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.

Current Samples

Supporting Code

  • 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.
  • firebase_flutter_repository - Implements the todos repository using firestore as the data source.
  • firebase_rtdb_flutter_repository - Implements the todos repository using firebase real-time database as the data source.

Running the samples

iOS / Android

cd <sample_directory>
flutter run 

Web

Make sure you're on Flutter version "Flutter 1.12.13+hotfix.6 • channel beta" or newer. Not all samples support web at this time, so please check the sample directory for a lib/main_web.dart file.

cd <sample_directory>
flutter run -d chrome -t lib/main_web.dart

Why a todo app?

The app in this project aims to be simple enough that you can understand it quickly, but complex enough to showcase difficult design decisions and testing scenarios. For more information, see the app's specification.

Be excellent to each other

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.

Contributing

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 :)

License

All code in this repo is MIT licensed.

Attribution

All of these ideas and even some of the language are directly influenced by two projects:

Contributors

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! :)

Comments
  • Configure Cirrus CI

    Configure Cirrus CI

    @mmcc007 wanted to compare Cirrus with the current setup so I've tried to migrate. While testing I've noticed that times for different shard varies a lot for one run to another. I've checked a few Travis runs and saw the same pattern. Test run times unfortunately are not predictable. So I'm not sure how do the comparison 😔

    But the config is 5 times smaller 😅

    You can check a full build here: https://cirrus-ci.com/build/5102555485962240

    Just wanted to share the findings. Please let me know if you have questions. 🙌

    opened by fkorotkov 41
  • All code for examples should be in example dirs

    All code for examples should be in example dirs

    This is clearly and awesome resource for flutter developers.

    It's also a huge pain in the backside to traverse. Tutorials and examples should be fully encapsulated. A dev who wants to traverse a specific example NOT thrilled about hoisting themselves right out of the project to understand what the code is doing. It's as nasty as .window.SomeResourceINeedInVariousPlaces = ....

    Keep the stuff in /lib if you want and then make a script to copy the source to the appropriate example trees. It may seem like a small thing, but those little things are what take products from 51ez5ttnxwl

    to

    41uywaprmbl

    opened by relativityboy 22
  • use git import in todos_repository_simple

    use git import in todos_repository_simple

    It'd be nice to be able to import repositories from other projects like:

    name: flutter_todos
    description: A new Flutter project.
    
     environment:
      sdk: ">=2.0.0 <3.0.0"
    
     dependencies:
      flutter:
        sdk: flutter
      todos_app_core:
        git:
          url: https://github.com/brianegan/flutter_architecture_samples
          path: todos_app_core
      todos_repository_core:
        git:
          url: https://github.com/brianegan/flutter_architecture_samples
          path: todos_repository_core
      todos_repository_simple:
        git:
          url: https://github.com/brianegan/flutter_architecture_samples
          path: todos_repository_simple
      
     flutter:
      uses-material-design: true 
    

    but because the todos_repository_simple pubspec references the todos_repository_core using a relative import it seems like this is not possible.

    opened by felangel 14
  • Add ReduRx sample

    Add ReduRx sample

    Borrowed a lot from vanilla and built_redux, but I think the main differences are clear, like: where and how Actions can be called and specially how sub-state/props are mapped from State to a Widget builder.

    opened by leocavalcante 9
  • Can't run any sample

    Can't run any sample

    I am unable to run any of this samples. I get this error on flutter packages get Because test >=1.6.2 <1.6.4 depends on test_api 0.2.5 and every version of flutter_driver from sdk depends on test_api 0.2.11, test >=1.6.2 <1.6.4 is incompatible with flutter_driver from sdk. So, because vanilla depends on both flutter_driver any from sdk and test 1.6.2, version solving failed. Please let me know if you know how to solve this. Thanks.

    opened by esperaking81 8
  • Unable to run bloc_library

    Unable to run bloc_library

    Hi there! I'm a noob doing my best to get your project running. I think that I found a potential package version conflict in the bloc_library project.

    flutter pub get pubspec.yaml 
    Because every version of todos_repository_simple from git depends on rxdart ^0.22.0 and bloc >=0.10.0 <0.13.0 depends on rxdart ^0.
    21.0, todos_repository_simple from git is incompatible with bloc >=0.10.0 <0.13.0.
    And because flutter_bloc >=0.9.0 <0.11.0 depends on bloc ^0.11.0, todos_repository_simple from git is incompatible with flutter_blo
    c >=0.9.0 <0.11.0.
    So, because bloc_library depends on both flutter_bloc ^0.10.0 and todos_repository_simple from git, version solving failed.
    Running "flutter packages get" in ....                                  
    pub get failed (1)
    

    This error went away when I incremented the below in the pubspec.yaml: flutter_bloc: ^0.10.0 to flutter_bloc: ^0.13.0

    After getting past this error, I got stuck on the below error.

    flutter run -d iPhon
    Launching lib/main.dart on iPhone 8 in debug mode...
    
    Compiler message:
    lib/blocs/simple_bloc_delegate.dart:11:8: Error: The method 'SimpleBlocDelegate.onTransition' has fewer positional arguments than
    those of overridden method 'BlocDelegate.onTransition'.
      void onTransition(Transition transition) {
           ^
    file:///Users/brian.mcilwain/source/flutter/.pub-cache/hosted/pub.dartlang.org/bloc-0.13.0/lib/src/bloc_delegate.dart:17:8:
    Context: This is the overridden method ('onTransition').
      void onTransition(Bloc bloc, Transition transition) => null;
           ^
    lib/blocs/simple_bloc_delegate.dart:11:32: Error: The parameter 'transition' of the method 'SimpleBlocDelegate.onTransition' has
    type 'Transition<dynamic, dynamic>', which does not match the corresponding type, 'Bloc<dynamic, dynamic>', in the overridden
    method, 'BlocDelegate.onTransition'.
     - 'Transition' is from 'package:bloc/src/transition.dart'
     ('file:///Users/brian.mcilwain/source/flutter/.pub-cache/hosted/pub.dartlang.org/bloc-0.13.0/lib/src/transition.dart').
     - 'Bloc' is from 'package:bloc/src/bloc.dart'
     ('file:///Users/brian.mcilwain/source/flutter/.pub-cache/hosted/pub.dartlang.org/bloc-0.13.0/lib/src/bloc.dart').
    Change to a supertype of 'Bloc<dynamic, dynamic>', or, for a covariant parameter, a subtype.
      void onTransition(Transition transition) {
                                   ^
    file:///Users/brian.mcilwain/source/flutter/.pub-cache/hosted/pub.dartlang.org/bloc-0.13.0/lib/src/bloc_delegate.dart:17:8:
    Context: This is the overridden method ('onTransition').
      void onTransition(Bloc bloc, Transition transition) => null;
           ^
    lib/blocs/simple_bloc_delegate.dart:17:8: Error: The method 'SimpleBlocDelegate.onError' has fewer positional arguments than those
    of overridden method 'BlocDelegate.onError'.
      void onError(Object error, StackTrace stacktrace) {
           ^
    file:///Users/brian.mcilwain/source/flutter/.pub-cache/hosted/pub.dartlang.org/bloc-0.13.0/lib/src/bloc_delegate.dart:24:8:
    Context: This is the overridden method ('onError').
      void onError(Bloc bloc, Object error, StackTrace stacktrace) => null;
           ^
    lib/blocs/simple_bloc_delegate.dart:17:41: Error: The parameter 'stacktrace' of the method 'SimpleBlocDelegate.onError' has type
    'StackTrace', which does not match the corresponding type, 'Object', in the overridden method, 'BlocDelegate.onError'.
     - 'StackTrace' is from 'dart:core'.
     - 'Object' is from 'dart:core'.
    Change to a supertype of 'Object', or, for a covariant parameter, a subtype.
      void onError(Object error, StackTrace stacktrace) {
                                            ^
    file:///Users/brian.mcilwain/source/flutter/.pub-cache/hosted/pub.dartlang.org/bloc-0.13.0/lib/src/bloc_delegate.dart:24:8:
    Context: This is the overridden method ('onError').
      void onError(Bloc bloc, Object error, StackTrace stacktrace) => null;
           ^
    lib/blocs/simple_bloc_delegate.dart:12:23: Error: Too few positional arguments: 2 required, 1 given.
        super.onTransition(transition);
                          ^
    lib/blocs/simple_bloc_delegate.dart:18:18: Error: Too few positional arguments: 3 required, 2 given.
        super.onError(error, stacktrace);
                     ^
    Compiler failed on /Users/brian.mcilwain/source/flutter_architecture_samples/bloc_library/lib/main.dart
    Error launching application on iPhone 8.
    

    What I noticed in VSCode was that I was getting an import statement saying that a file wasn't found import 'package:bloc/bloc.dart';, which was in lib/blocs/simple_bloc_delegate.dart. Should this come from a plugin? Is a package no longer working on version 13 that I changed to fix the above bug?

    I believe at least some of these things are not expected and I hope this one's not just me, but if I'm missing something on how to run the project please respond or add it to the README.

    Thank you!

    enhancement good first issue 
    opened by bmcilw1 8
  • Increased timeout on tests from 30 to 120 seconds...

    Increased timeout on tests from 30 to 120 seconds...

    … for slow running emulators in cloud

    Fixed analyzer warnings

    The following jobs are timing out (and succeeding on retry): firestore_redux_android mvc_android mvi_flutter_android simple_bloc_flutter_android vanilla_android

    opened by mmcc007 8
  • Added integration test to create a new task

    Added integration test to create a new task

    Modified new task screen for redux project. The new task screen for other projects probably need to be modified.

    Runs the integrations test on ios in travis

    opened by mmcc007 8
  • error with redux-firestore example on latest flutter beta

    error with redux-firestore example on latest flutter beta

    hey everyone,

    im trying to run the redux-firestore example on latest flutter beta and I get this error:

    >gradlew assembleDebug --info > debug.txt
    
    FAILURE: Build failed with an exception.
    
    * What went wrong:
    Execution failed for task ':app:transformDexArchiveWithExternalLibsDexMergerForDebug'.
    > java.lang.RuntimeException: java.lang.RuntimeException: com.android.builder.dexing.DexArchiveMergerException: Unable to merge dex
    
    
    opened by vbandrade 8
  • Navigation as a result of action in redux/built_redux pattern

    Navigation as a result of action in redux/built_redux pattern

    Hi, I'm wondering how should I implement the case when the screen should change as a result of some action -- say to swap LoginPage to HomePage. Successful login would be an action, so I would either push route in middleware (I don't have the context, though) or somehow put the route in app state, but then I'd be just swapping widgets in store connection, not actually pushing new routes with the navigator.

    Overall how should navigation triggered by the actions be handled (as opposed to navigation happening as a result of user interaction)?

    opened by lwasyl 8
  • Provider example

    Provider example

    With the support of the new Provider library (as shown here), I think a new example would be worthwhile. It might help others weigh the pros and cons of it versus BLoC or Scoped Model.

    Relevant docs: https://pub.dev/packages/provider

    good first issue 
    opened by DFreds 7
  • Getx

    Getx

    I want to do in getx , how can i do and send to this repository? there is a sample project that we can use to put the statemanager ?

    I have one in getx with hive and a plus with internationalization. I'd be glad to be in the samples!

    https://github.com/brasizza/hive-medium-p4

    opened by brasizza 0
  • more advanced use case; cms with rbac feature

    more advanced use case; cms with rbac feature

    Hi @brianegan ,

    Hope you are all well !

    I am just dropping this message as I would like to create a teampass (https://teampass.net/) clone with flutter.

    What would you advice me to use as an architecture for managing permission rights to items categories with view/edit/delete capability per categories or items. I found flutter_rbac or dart-casbin and animated_tree_view

    Screenshot of teampass: pf_tp_5

    The bottleneck I see, is that have I have 30k items to hook in the the tree view. Is It possible to make the tree view searchable ?

    Thanks for any insights or inputs to help me to bootstrap this project.

    Cheers, Luc

    opened by ghost 0
  • Samples don't run with latest Flutter

    Samples don't run with latest Flutter

    Many (if not all) samples do not compile/run with the latest Flutter (Flutter 2.5.0).

    One set of issues is related to the change of font names. See open PR.

    opened by jinalskothari 3
  • change_notifier_provider compile error

    change_notifier_provider compile error

    I'm trying to run the change_notifier_provider example and am getting the error below when trying to run on an iPhone 12 Pro simulator. I'm running in VS Code.

    $ flutter run Multiple devices found: M2002J9E (mobile) • 192.168.0.151:5555 • android-arm64 • Android 11 (API 30) iPhone 12 Pro (mobile) • 13624E90-6880-4713-A2CE-03E4749BB26C • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator) Chrome (web) • chrome • web-javascript • Google Chrome 91.0.4472.77 [1]: M2002J9E (192.168.200.151:5555) [2]: iPhone 12 Pro (13624E90-6880-4713-A2CE-03E4749BB26C) [3]: Chrome (chrome) Please choose one (To quit, press "q/Q"): 2 Launching lib/main.dart on iPhone 12 Pro in debug mode... Running pod install... 2,090ms CocoaPods' output: ↳

    [!] Invalid `Podfile` file: no implicit conversion of nil into String.
    
     #  from /Users/zzz/Documents/workspace/flutter/flutter_architecture_samples/change_notifier_provider/ios/Podfile:57
     #  -------------------------------------------
     #      unless File.exist?(copied_framework_path)
     >        FileUtils.cp_r(File.join(cached_framework_dir, 'Flutter.framework'), copied_flutter_dir)
     #      end
     #  -------------------------------------------
    
    /Users/zzz/.rvm/rubies/ruby-2.7.2/lib/ruby/gems/2.7.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfile.rb:318:in `rescue in block in from_ruby'
    /Users/zzz/.rvm/rubies/ruby-2.7.2/lib/ruby/gems/2.7.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfile.rb:312:in `block in from_ruby'
    /Users/zzz/.rvm/rubies/ruby-2.7.2/lib/ruby/gems/2.7.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfile.rb:50:in `instance_eval'
    /Users/zzz/.rvm/rubies/ruby-2.7.2/lib/ruby/gems/2.7.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfile.rb:50:in `initialize'
    /Users/zzz/.rvm/rubies/ruby-2.7.2/lib/ruby/gems/2.7.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfile.rb:310:in `new'
    /Users/zzz/.rvm/rubies/ruby-2.7.2/lib/ruby/gems/2.7.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfile.rb:310:in `from_ruby'
    /Users/zzz/.rvm/rubies/ruby-2.7.2/lib/ruby/gems/2.7.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfile.rb:276:in `from_file'
    /Users/zzz/.rvm/rubies/ruby-2.7.2/lib/ruby/gems/2.7.0/gems/cocoapods-1.10.1/lib/cocoapods/config.rb:205:in `podfile'
    /Users/zzz/.rvm/rubies/ruby-2.7.2/lib/ruby/gems/2.7.0/gems/cocoapods-1.10.1/lib/cocoapods/command.rb:160:in `verify_podfile_exists!'
    /Users/zzz/.rvm/rubies/ruby-2.7.2/lib/ruby/gems/2.7.0/gems/cocoapods-1.10.1/lib/cocoapods/command/install.rb:46:in `run'
    /Users/zzz/.rvm/rubies/ruby-2.7.2/lib/ruby/gems/2.7.0/gems/claide-1.0.3/lib/claide/command.rb:334:in `run'
    /Users/zzz/.rvm/rubies/ruby-2.7.2/lib/ruby/gems/2.7.0/gems/cocoapods-1.10.1/lib/cocoapods/command.rb:52:in `run'
    /Users/zzz/.rvm/rubies/ruby-2.7.2/lib/ruby/gems/2.7.0/gems/cocoapods-1.10.1/bin/pod:55:in `<top (required)>'
    /Users/zzz/.rvm/rubies/ruby-2.7.2/bin/pod:23:in `load'
    /Users/zzz/.rvm/rubies/ruby-2.7.2/bin/pod:23:in `<main>'
    /Users/zzz/.rvm/gems/ruby-2.7.2/bin/ruby_executable_hooks:22:in `eval'
    /Users/zzz/.rvm/gems/ruby-2.7.2/bin/ruby_executable_hooks:22:in `<main>'
    

    Error running pod install Error launching application on iPhone 12 Pro.

    $ flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.0.6, on macOS 11.4 20F71 darwin-x64, locale zh-Hans-CN) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2) [✓] Xcode - develop for iOS and macOS [✓] Chrome - develop for the web [✓] Android Studio (version 4.2) [✓] IntelliJ IDEA Ultimate Edition (version 2017.3.2) [✓] VS Code (version 1.58.0) [✓] Connected device (3 available)

    • No issues found!

    opened by developer-zsg 0
Owner
Brian Egan
Montana boy living in Berlin, Indie Hacker, and speaker of bad German.
Brian Egan
ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter

Basic Widgets Examples This is aimed for complete beginners in Flutter, to get them acquainted with the various basic widgets in Flutter. Run this pro

Pooja Bhaumik 815 Jan 3, 2023
Minha primeira aplicação android utilizando Flutter feito no curso de Flutter da Cod3r Cursos Online. O foco dessa aplicação foi um contato inicial com o Flutter.

expenses Expenses é uma aplicação android simples feita em Flutter para controlar despesas pessoais. A aplicação consiste em: Listar transações feitas

Guilherme Teixeira Ais 2 Apr 19, 2022
Flutter Github Following Application, Using Flutter Provider and Flutter HTTP to get data from Github API.

Flutter Github Following Application Watch it on Youtube Previous Designs Checkout my Youtube channel Installation Please remember, after cloning this

Mohammad Rahmani 110 Dec 23, 2022
Flutter RSS feed parsing - A demo application of flutter which parse RSS XML contents to the flutter application

Flutter RSS feed parsing demo This is demo application of flutter which shows ho

Nyakuri Levite 3 Nov 15, 2022
Boris Gautier 1 Jan 31, 2022
Code for Flutter Talk from Flutter Vikings 2022: Custom User Interactions in Flutter

Custom User Interactions - Flutter Vikings 2022 A companion app for the Flutter Vikings 2022 talk - Custom User Interactions with Shortcuts, Intents,

Justin McCandless 9 Sep 16, 2022
Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flutter app.

Flutter Tutorial - User Profile Page UI 1/2 Create a Flutter User Profile Page UI where you can access and edit your user's information within your Fl

Johannes Milke 46 Dec 6, 2022
Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flutter app.

Flutter Tutorial - User Profile Page UI #2 Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flu

Johannes Milke 45 Dec 15, 2022
Let's create a selectable Flutter Navigation Drawer with routing that highlights the current item within the Flutter Sidebar Menu.

Flutter Tutorial - Sidebar Menu & Selectable Navigation Drawer Let's create a selectable Flutter Navigation Drawer with routing that highlights the cu

Johannes Milke 12 Dec 26, 2022
Components that optimize Flutter fluency.(Flutter 流畅度优化的通用方案,轻松解决卡顿问题)

Flutter fluency optimization component "Keframe" Page switching fluency improved: How to use Project depend on: Quick learning Constructor Description

Ke Technologies 793 Dec 30, 2022
Challenge yourself every weekend with flutter. Join me to implement challenging UI & digital designs using Flutter.

Weekend With Flutter This is my new challenge. Every weekend, I want to implement challenging UI & digital designs using Flutter. you can join me with

Payam Zahedi 16 Feb 24, 2022
Let's create a complete Flutter User Profile Page with SharedPreferences to persist the user's information in Flutter.

Flutter Tutorial - User Profile & SharedPreferences Let's create a complete Flutter User Profile Page with SharedPreferences to persist the user's inf

Johannes Milke 21 Dec 3, 2022
Let's create a Flutter Collapsible Sidebar Menu that can collapse and expand the Navigation Drawer in Flutter.

Flutter Tutorial - Collapsible Sidebar Menu & Navigation Drawer Let's create a Flutter Collapsible Sidebar Menu that can collapse and expand the Navig

Johannes Milke 22 Jan 3, 2023
🚗 Apple CarPlay for Flutter Apps. Aims to make it safe to use apps made with Flutter in the car by integrating with CarPlay.

CarPlay with Flutter ?? Flutter Apps now on Apple CarPlay! flutter_carplay aims to make it safe to use iPhone apps made with Flutter in the car by int

Oğuzhan Atalay 156 Dec 26, 2022
Flutter ui boilerplate is easiest way to create new flutter project with clean code and well organized file folder.

Flutter UI Boilerplate "Sharing for fun" Flutter ui boilerplate is easiest way to create new flutter project with clean code and well organized file f

Dimas Ibnu Malik 122 Dec 1, 2022
This is a Flutter app which shows how to use the PageView Class in your Flutter App

page_view_class A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Shehzaan Mansuri 1 Oct 25, 2021
Flutter Architecture Blueprints is a project that introduces MVVM architecture and project structure approaches to developing Flutter apps.

Flutter Architecture Blueprints Flutter Architecture Blueprints is a project that introduces MVVM architecture and project structure approaches to dev

Katsuyuki Mori 2 Apr 9, 2022
Flutter Viral News App using : Flutter + Rest Api + Bloc / Cubit

Intro Viral News App on Flutter. The tech used: Flutter widgets + Flutter Bloc / Cubit + Rest Api Check the screenshot : P.S Make sure to upgrade your

Ihab Zaidi 8 Nov 2, 2022