Flutter Votlin App

Flutter clone of Kotlin Multiplatform Votlin App -> https://github.com/sergiocasero/votlin-app

Kotlin multiplatform is great, but Flutter can be a fantastic alternative!

This is a small petshop with a master/detail structure. It lists the talks from Extremadura Digital Day event.

image
image

Getting Started with Flutter

For help getting started with Flutter, view the online documentation.

If you want to find how amazing is Flutter, take a look at this repo -> https://github.com/Solido/awesome-flutter

Project architecture

There are some architectures and patterns that are followed by the great community of Flutter:

  • Redux
  • Bloc pattern
  • Scope Model
  • Inherited Widget
  • Model View Controller
  • Model View Intent

A great resource related to flutter architectures -> https://github.com/brianegan/flutter_architecture_samples

Flutter community, for some reason, by the moment, is ignoring Clean Architecture… so, why not give a oportunity to clean architecture in flutter?

This project try to follow the clean architecture structure. Some related resources:

http://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html
https://fernandocejas.com/2014/09/03/architecting-android-the-clean-way/

Architecture branches

To experiment with project architecture, we are going to implement different approaches in different branches

BranchDescription
architecture/multiple_packages_mvpMultiple packages, model view presenter
architecture/multiple_packages_scoped_modelMultiple packages, scoped model
architecture/multiple_packages_stream_builderMultiple packages, stream builder

TODO branches

  • Single package architecture
  • FutureBuilder
  • States Rebuilder package

But… is Clean Architecture the best architecture for Flutter?

Absolutely not. This is only a petshop project for experiment with Clean Architecture and with Flutter framework. We don’t know what is the best architecture for Flutter. The only way to find it is experimenting!

Animation branches

To experiment with animations, we are going to create different branches

BranchDescription
animations/animated_builderExperiment with animated builder widget

TODO branches

  • Flare
  • Lottie

How to build and run

Building the code

  • Use your favorite IDE. Flutter supports different IDE
  • If you don’t have Flutter installed, follow the official docs: https://flutter.io/docs/get-started/install
  • If your IDE shows some errors, don’t forget to execute command flutter packages get in domain and data modules

Running the Android app

We have created some kind of flavors in flutter app, inspired by this post

Actually, we have added configuration for each flavor in data layer

Probably we can find better ways, but this is only the beginning.

To run the android app:

  • Execute flutter run lib/<main_file>. For instance, to run mock flavor, execute flutter run lib/main-mock.dart.
  • If you execute flutter run, mock flavor is executed
FlavorDescriptionMain file
MOCKOffline version, mocked with a json filemain-mock.dart
LOCALHOST_EMULATOROnline version, against localhost, running in the emulator. Json server requiredmain-localhost_emulator.dart

Running the iOS app

TODO

Running the backend

Mock flavor does not backend, because we get the information from hardcoded json.

MOCK

No backend required, we get the information from hardcoded json

LOCALHOST

Running tests

TODO

Thanks to:

Contributing

Feel free to open issues or make a pull request. All contributions are welcome!