Flutter MVVM Architecture & Obfuscation

Prabir Kalwani
4 min readMar 12, 2024

--

Writing Clean Good Production Ready Code in Flutter

Knowing how to write production-level code is essential for developers, and it involves following specific methodologies that depend from organisation to organisation. For the case of Flutter, we have multiple such Architectures to write production ready code such as MVVM, MVP, and MCP.

Prerequisites

Flutter Installation

  • You have to first install Flutter using the flutter documentation Below :-

After This You can proceed to clone the following Repository

Thats All Congratulations You have successfully Setup an Flutter Application with basic MVVM

What is MVVM ?

Introduction

MVVM Stands for model view view model.
Lets Create MVVM button application where each click results in an incremental change in its value, reflecting the total number of clicks :-

Model:

  • Represents the user data, for the case of the application the above code it is counter to count the number of times the user has clicked.
  • Model Can also be used to interact with external services like F backend APIs, or databases.

View:

  • Contains the UI elements for the counter page which is the button which is to be clicked and the display of the counter variable .
  • Receives data and state updates from the ViewModel and displays them on the screen.
  • Captures user interaction events like button clicks and text field changes.

ViewModel:

  • Acts as the bridge between the View and the Model.
  • Exposes functions for user interaction events (e.g., button click.
  • Handles business logic like validation, error handling, and data formatting.
  • Fetches data from the Model and exposes it to the View in a suitable format.
  • Updates the UI by notifying the View when the state changes.

State Management:

  • Various state management solutions can be used to connect the ViewModel with the View. Popular options include:
  • Provider: Offers a simple and powerful way to manage state with ChangeNotifier classes. (being used in this project)
  • Riverpod: Provides dependency injection and state management with streams and providers.
  • GetIt and Bloc: Alternative state management libraries with different approaches.

Additional Considerations:

  • Navigation: Use a separate navigation service to handle transitions between different screens based on the authentication state.
  • Error Handling: Clearly display error messages to the user through the ViewModel and View.
  • Testing: Utilize unit and widget testing to ensure the functionality of each component individually and as a whole.
file structure of a MVVM Application

Great , Now you have developed a key undertanding of the flutter MVVM Application . Moving to how to secure your Flutter Enviornment .

How To Secure Your Environment

Introduction

There are multiple ways but for the simplicity of understanding we will Obfuscation and Environment Variables .

Obfuscation in Flutter Refers to the process of transforming your app’s binary code into a more complex and obscure form while preserving its functionality. This makes it harder for humans to understand the code and hinders reverse engineering efforts.

Implementation

Lets Create the example of the Obfuscation using the current project:-

Note :- Please Dont commit this folder / file to Github

  • We can create a env folder in you project lib directory
  • Add envied to pubsec.yaml and pub get the package (install the envied package to your project)
  • post this create a .env file in your directory consisting of your environment secrets
YOUR_API_KEY = justasimpleapikey
  • After that create a file called env.g.dart which comprises of
import 'package:envied/envied.dart';
part 'env.g.dart';
@Envied(path: '.env')
abstract class Env {
@EnviedField(varName: "YOUR_API_KEY", obfuscate: true)
static final String yourapikey = _Env.yourapikey;

}
  • Post this run the following command to Obfuscate your project
dart run build_runner build
  • To declare / call your api key just use the following syntax
apiKey: Env.YOUR_API_KEY,

You have now Successfully completed your env Obfuscation to protect your Environment secrets locally

I hope this article was helpful in making you understand the basics of how to write production ready code and in a secure manner.

Queries

For any issues with the above program please contact me and ill try to reply as soon as possible

prabir.kalwani@gmail.com

--

--

Prabir Kalwani

Curious scholar pursuing Tech and MBA. Committed to innovation, sustainability, adept in advanced web tech like ReactJS, MERN, MEAN.