Scribd
Upload
1 views

session-9

The document provides an overview of the MVVM (Model-View-ViewModel) architecture, highlighting its components and benefits such as improved code organization and testability. It details the implementation of MVVM in Flutter, including the setup of the Model, ViewModel, and View, along with code examples. Additionally, it discusses the benefits and challenges of using MVVM in Flutter applications and includes a practical exercise for creating a simple app using this architecture.

Uploaded by

darkmail6969
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

session-9

The document provides an overview of the MVVM (Model-View-ViewModel) architecture, highlighting its components and benefits such as improved code organization and testability. It details the implementation of MVVM in Flutter, including the setup of the Model, ViewModel, and View, along with code examples. Additionally, it discusses the benefits and challenges of using MVVM in Flutter applications and includes a practical exercise for creating a simple app using this architecture.

Uploaded by

darkmail6969
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

MVVM

1. Introduction to MVVM Architecture


• Overview of MVVM:

o MVVM stands for Model-View-ViewModel, an architectural pattern used for the


separation of concerns.

o Helps in organizing code, improves scalability, maintainability, and testability.

• Components of MVVM:

o Model: Represents the data layer (business logic, local database interaction, etc.).

o View: Handles the UI (what the user sees).

o ViewModel: Acts as a mediator between the Model and the View, contains UI-
related logic, and provides data to the View.

• Why use MVVM?

o Decouples the UI from the business logic.

o Easy to test individual components.

o Simplifies maintaining large applications.

2. MVVM Structure in Flutter


• Model:

o Represents your data layer. You could use plain Dart classes to simulate the model
without APIs.

o Example: A User model class.

import 'package:get/get.dart';

class User {
final RxString name, age;

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

}
View:

• The UI layer, where widgets are built based on data provided by the ViewModel.

• It should be simple and focused on rendering UI elements.

ViewModel:

• Acts as a bridge between Model and View.

• It retrieves/manipulates data from the Model and provides that data to the View for
rendering.

• In Flutter, we usually use GetxController to make ViewModels reactive and notify the UI of
any data changes.

3. Implementing MVVM in Flutter

• Step-by-Step Implementation:

1. Set up the Model:

▪ Create a model class representing the data. For simplicity, we’ll use a local
User model.

import 'package:get/get.dart';

class User {
final RxString name, age;

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

}
Set up the ViewModel:

• Use GetXController or Provider to manage state changes and notify the View of any
updates.

Set up the View:

• The View listens to the ViewModel using ChangeNotifierProvider and displays the data.

import 'package:demo_app/view%20models/user_viewmodel.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '';

class UserInfo extends StatelessWidget {


const UserInfo({super.key});

@override
Widget build(BuildContext context) {

var size = Get.size;


Rx<UserViewModel> userViewModel = UserViewModel().obs;

return Obx(() => Scaffold(


body: SizedBox(
width: size.width,
height: size.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("name: ${userViewModel.value.user.value.name}\nage:
${userViewModel.value.user.value.age}"),
const SizedBox(height: 11,),
ElevatedButton(onPressed: () {
userViewModel.value.updateUserInfo(name: "kona".obs, age:
"18".obs);
}, child: Text("update user info"))
],
),
),
));
}
}

Hook it up in the main file:

• Use GetMaterialApp to provide the ViewModel to the View.

import 'package:demo_app/screens/getx_example.dart';
import 'package:demo_app/screens/home.dart';
import 'package:demo_app/view/user_info.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {


const MyApp({super.key});

@override
Widget build(BuildContext context) {
return const GetMaterialApp(
debugShowCheckedModeBanner: false,
home: UserInfo());
}
}

4. Benefits and Challenges of MVVM in Flutter


• Benefits:

o Separation of concerns improves code organization.


o Reusable components (ViewModel can be reused in multiple Views).

o Easier to test ViewModel logic.

• Challenges:

o Overhead in smaller apps (can be more complex than needed).

o Requires familiarity with state management tools like Provider or GetX.

5. Practical Exercise
• Exercise: Create a simple Flutter app that allows users to enter their name and age, and
then display that information in the View using MVVM architecture. Students should:

o Define a User model.

o Implement a UserViewModel using ChangeNotifier.

o Use Provider to display and update user details in the UI.

You might also like