An effective architectural pattern for Flutter Apps using MobX
(EN) Flutter: State Management with Mobx
(EN) MobX Docs
(PT) MobX Docs
(PT) Flutterando's MobX Playlist
Install the following VSCode Plugins:
Awesome Flutter Snippets
flutter_mobx
Leave the following command running in a background prompt, to generate the MobX/JsonSerializable files:
flutter pub run build_runner watchIn your settings.json file, insert the following content:
"files.exclude": {
"**/*.g.dart": true,
}Create the .env file, based on .env.example.
This project aims to help developers who are starting a new project in Flutter, using MobX to manage the state. MobX is a state-management library that makes it simple to connect the reactive data of your application with the UI. As a developer, you focus purely with on the data that will be consumed by the UI, without worrying about keeping the two in sync.
This application was developed to contain examples of features that are usually needed in apps, as well as features that we had difficulty implementing during our App development journey in Flutter.
The Splash Page loads data used as the basis for the application, checks the existence of a User Token and validate whether the user has ever logged into the App.
Login Page, it has reactive form validation and User Token storage on the device's local database.
The application's home page, makes HTTP requests for a joke API to exemplify the rendering of a Loading component, as well as an in-App notification presenting the success of the request. This page also exemplifies Navigation to other pages, along with the presentation of a Dialog, both without using Context.
Exemplifies the state sharing between two totally independent pages.
Core concepts for this project's structure
- Sub-packages should not introduce new concepts, just more details
- Packages should reflect business-concepts, not technical ones
Explanation of this project's folders:
lib\components: Helper Widgets that will be used throughout the whole app
lib\domain: All classes that are inside a specific 'domain', considering the business-concepts
lib\shared: Classes that are shared throughout more than one domain
lib\utils: Helper classes
firebase_analytics: Plugin to use the Google Analytics for Firebase, an app measurement solution that provides insight on app usage and user engagement on Android and iOS
firebase_crashlytics: Plugin for Firebase Crashlytics. It reports uncaught errors to the Firebase console
flutter_dotenv: Used to configure any flutter application with global variables using a .env file
mobx and flutter_mobx: Libraries to reactively manage the state of the application
get: Navigation library that lets you navigate between screens, open dialogs, and display snackbars easily with no context
get_it: Service Locator that allows to "inject dependencies" and request them everywhere in your App. It can be used instead of InheritedWidget or Provider
hive: Key-value database. Strongly encrypted using AES-256. Faster than Shared Preferences and SQLite
json_annotation: Library used to generate code for JSON serialization and deserialization
modal_progress_hud: A modal progress indicator widget. Wrap around another widget to block access to widget during an async call
oktoast: Toast library to provide in-app toast notifications
This project already has a configured Lint, based on some of the rules of Effective Dart: Style
You can enable/disable rules whenever you want, depending on your needs. To do so adjust your analysis_options.yaml.
You can check some rules here.
Thanks goes to these wonderful people:
Marcelo Wippel 💻 📖 👀 |
Evandro Pomatti 🤔 |
Kennedy Batista 🤔 |
Mateus Metz 🤔 |