Flutter MVVM: How to Implement MVVM Architecture in Flutter

Model-View-ViewModel (MVVM) is a popular architectural pattern that helps organize Flutter applications for better maintainability and scalability. By separating concerns into three layers—Model, View, and ViewModel—MVVM ensures a clean code structure, improves testability, and enhances state management.

Why Use MVVM in Flutter?

• Separation of Concerns: Keeps UI (View) separate from business logic (ViewModel) and data (Model).
• Improves Testability: The ViewModel can be tested independently of the UI.
• Better State Management: Integrates well with Flutter’s state management solutions like Provider or Riverpod.
• Scalability: Makes the code easier to scale and maintain as the app grows.

MVVM Layers Explained

1. Model (M)

Represents the data structure and business logic. It defines how data is fetched, stored, and manipulated.

class User {
  final String name;
  final int age;

  User({required this.name, required this.age});
}

2. ViewModel (VM)

Acts as a bridge between the View and Model. It contains the logic and exposes data to the View.

import 'package:flutter/foundation.dart';
import 'user_model.dart';

class UserViewModel extends ChangeNotifier {
  User? _user;

  User? get user => _user;

  void loadUserData() {
    _user = User(name: "John Doe", age: 25);
    notifyListeners();
  }
}

3. View (V)

Displays the UI and listens to changes in the ViewModel using Flutter’s state management.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'user_view_model.dart';

class UserScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final userVM = Provider.of<UserViewModel>(context);

    return Scaffold(
      appBar: AppBar(title: Text("MVVM Example")),
      body: Center(
        child: userVM.user == null
            ? ElevatedButton(
                onPressed: userVM.loadUserData,
                child: Text("Load User"),
              )
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text("Name: ${userVM.user!.name}"),
                  Text("Age: ${userVM.user!.age}"),
                ],
              ),
      ),
    );
  }
}

How to Integrate MVVM in a Flutter Project

Step 1: Add Dependencies

Add provider to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.5

Step 2: Set Up Provider in main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'user_view_model.dart';
import 'user_screen.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => UserViewModel()),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UserScreen(),
    );
  }
}

Conclusion

MVVM in Flutter provides a structured approach to managing state and business logic. By using Model, ViewModel, and View, you can create scalable and maintainable applications. Provider makes it easy to implement MVVM, but other state management solutions like Riverpod or Bloc can also be used.