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

Issues
  • 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
  • Add Frideos library sample

    Add Frideos library sample

    opened by frideosapps 18
  • 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
  • MVC Sample v. 0.8.1

    MVC Sample v. 0.8.1

    Hello Brian,

    Here you are.

    As requested, I have a 'MVC' contribution for your review.

    Regards,

    Greg Perry

    opened by Andrious 13
  • MobX example

    MobX example

    opened by pavanpodila 11
  •  Workaround for built_redux build problem

    Workaround for built_redux build problem

    Also added codecov report

    Not clear how the build_runner is generating files, so bypassed for now. Should prob be resolved when known how.

    opened by mmcc007 10
  • Add Widget Tests to Bloc Library Sample

    Add Widget Tests to Bloc Library Sample

    Addresses: #119 screen shot 2019-03-06 at 8 16 46 pm

    Note: Coverage isn't 100% because of some weird LCOV behavior: screen shot 2019-03-06 at 8 15 03 pm

    opened by felangel 9
  • 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
  • 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
Owner
Brian Egan
Montana boy living in Berlin, Indie Hacker, and speaker of bad German.
Brian Egan
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 13 Nov 9, 2021
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 8 Oct 31, 2021
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 436 Nov 26, 2021
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 Nov 8, 2021
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 9 Oct 9, 2021
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 10 Oct 30, 2021
🚗 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 82 Nov 20, 2021
A quick sample app on how to implement a friend list and a profile page in Flutter.

FlutterMates All code resides in the /lib folder: there's no Android / iOS specific code needed. The article, slides and how this came to be, is here.

Codemate Ltd 480 Nov 15, 2021
A weather app built to learn how to use Canvas and Animation in Flutter.

Weather Quick Disclaimer I removed my private OpenWeather API key from the repo, if you want to get the weather forecast use your own in the openweath

Alessandro Aime 141 Oct 28, 2021
🍝 restaurant menu app made with flutter inspired by this design https://goo.gl/jChLBV

Menu Flutter Todo Make background colors that changes with PageView Add custom tab indicators Change food prices Make cart animation Customize card sh

Braulio Cassule 551 Nov 30, 2021
Flutter UI Challenges

FLUTTER UI CHALLENGE Put your Flutter experience to test with these UI Challenges. ⚠️ Contributions must be made in this repository. ⚠️ Levels: Beginn

Tomi Alagbe 1.3k Nov 21, 2021
A Flutter widget to create an iOS settings-table (static TableView).

flutter_cupertino_settings A Flutter widget to create an iOS settings-table (static TableView). import 'package:flutter_cupertino_settings/flutter_cup

Matthias Rupp 216 Nov 29, 2021
A music player component for Flutter (i.e. Spotify, Apple Music, etc.) [AGPL/example/no longer maintaining]

This is an example I currently have no plans of putting this on Pub. Originally, I did, but I lost interest. However, I think this is a good example,

Tobe Osakwe 205 Oct 28, 2021
https://dribbble.com/shots/3812962-iPhone-X-Todo-Concept Made With Flutter

?? FlutterTodo ?? Install Note: Make sure your Flutter environment is setup. In the command terminal, run the following commands: $ git clone https://

Marc L. 516 Nov 25, 2021
Flutter app for collection of UI in a UIKit

Flutter UIKit The goal of this project is to provide an ultimate collection of real world app's UIs. While I built Flutter UIKit for my own needs, it

Pawan Kumar 5.7k Nov 23, 2021
A Flutter project of book app UI

Book App Flutter A Flutter project of book app UI from prototype originally by Travis. Video Tutorial You can find the video tutorial of this project

Ardiansyah Putra 300 Nov 22, 2021
Login page built with @flutter 😍

The Gorgeous Login A login page built with flutter inspired by a design found on Uplabs Uplabs design Flutter rendering Contributors Code Contributors

Hugo EXTRAT 1.5k Nov 30, 2021
Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider.

DrawApp Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider. All code free to

Jake Gough 208 Nov 8, 2021