Flutter app architecture

Guide to design Flutter app architecture using Stacked plugin. Here is the detailed guide on Medium https://medium.com/codex/a-complete-guide-to-architect-your-flutter-application-a5a4da662549

Introduction

This sample demonstrates how one can

• Setup base architecture of Flutter app using Stacked plugin
• Use dependency injection for layers separation
• Code generator to generate boilerplate code for DI, routes and JSON parsing
• Make api calls using Retrofit plugin (mostly Android developers might be familier with it).

Apart from the basic architecture setup, this sample also demonstrates

• Project folder structure
• Navigation using ViewModel (without context)
• Easy data sharing between the screens
• And few more...

Setup

One can download the code in zip format or take checkout from the git repository.

Code generation

In the source code, one can find several files with following extensions:

• .g.dart
• .gr.dart
• .config.dart

All these files are auto-generated files for their source file. For ex, you can generate code of fromJson() and toJson() functions of TodoEntity class without writing its code.

For code generation, you need to do few things:

• Define the file name for the generated code. It should have the original file name with .g.dart extension.
• Define what code needs to be generated. In case of functions, it should have a $ prefix.
• Use build_runner tool to generate code.

Example: Let's take an example of TodoEntity class. You can see this line below imports

part 'todo_entity.g.dart';

This will tell build_runner tool to generate code for this class. Now what all code needs to be generated by build_runner tool is defined by the $ symbol. One can see that fromJson() will get value from _$TodoEntityFromJson(json) method and toJson() will get value from _$TodoEntityToJson(this) method. These two methods (with $ symbol) will be generated in todo_entity.g.dart file and will be included in todo_entity.dart file.

To generate code using build_runner tool, run the below command on terminal (path should be pointed to your project)

flutter pub run build_runner build

Note

You need to run build_runner command for code generation everytime when you make changes in your original file.