MVVM in Flutter

Govind Singh

3 January 2024

Flutter, a well-known open-source UI software development kit developed by Google as of my most recent update in September 2021, is not intrinsically based on the MVVM (Model-View-ViewModel) architecture.

Model: Represents the data and business logic of the application. It could be anything from simple data objects to complex services and databases.
View: Represents the user interface. In Flutter, the view is typically built using widgets.
ViewModel: Acts as a middleman between the View and the Model. It holds the application’s state, processes user input from the View, communicates with the Model, and updates the View accordingly.

Read more about Flutter app development from mobikul.

Model

The model serves as a single source of truth for database-related queries or real-time retrieve data.

This layer may include code validation, business logic, etc. This layer communicates with ViewModel in real-time or for local data. In response to the ViewModel, data are provided.

// model.dart
class User {
  String name;

  User(this.name);
}

// model.dart

class User {

String name;

User(this.name);

}

ViewModel

ViewModel serves as a liaison between View and Model, accepting all user events and communicating those requests for data to the Model. When the model has data, it goes back to the viewmodel, which then notifies the view of the information.

A single ViewModel can supply data to several Views because it can be used by multiple views.

// view_model.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'model.dart';

class EditTextViewModel extends ChangeNotifier {
  User? _user;

  EditTextViewModel() {
    _user = User('');
  }

  String? get name =&gt; _user?.name;

  void setName(String newName) {
    _user?.name = newName;
    notifyListeners();
  }
}

// view_model.dart

import 'package:flutter/material.dart';

import 'package:provider/provider.dart';

import 'model.dart';

class EditTextViewModel extends ChangeNotifier {

User? _user;

EditTextViewModel() {

_user = User('');

}

String? get name => _user?.name;

void setName(String newName) {

_user?.name = newName;

notifyListeners();

}

View

The view is the area of the screen where the user interacts with the Widgets displayed there. These user events call for a few actions that direct users to the ViewModel, where the rest of the ViewModel completes the task. ViewModel updates View once it has the necessary data.

// main.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'Model/view_model.dart';


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {


    return ChangeNotifierProvider(
      create: (context) =&gt; EditTextViewModel(),
      child: MaterialApp(
          debugShowCheckedModeBanner:false,
        home: EditTextView(),
      ),
    );
  }
}

class EditTextView extends StatelessWidget {
  const EditTextView({super.key});

  @override
  Widget build(BuildContext context) {
    EditTextViewModel viewModel = Provider.of&lt;EditTextViewModel&gt;(context);

    return Scaffold(

      appBar: AppBar(
        title: Text('EditText MVVM Example'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: &#091;
            TextField(
              onChanged: viewModel.setName,
              decoration: const InputDecoration(
                labelText: 'Enter your name',
              ),
            ),
            SizedBox(height: 16),
            Text(
              'Hello, ${viewModel.name}!',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
          ],
        ),
      ),
    );
  }
}

// main.dart

import 'package:flutter/material.dart';

import 'package:provider/provider.dart';

import 'Model/view_model.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return ChangeNotifierProvider(

create: (context) => EditTextViewModel(),

child: MaterialApp(

debugShowCheckedModeBanner:false,

home: EditTextView(),

);

}

class EditTextView extends StatelessWidget {

const EditTextView({super.key});

@override

Widget build(BuildContext context) {

EditTextViewModel viewModel = Provider.of<EditTextViewModel>(context);

return Scaffold(

appBar: AppBar(

title: Text('EditText MVVM Example'),

body: Padding(

padding: EdgeInsets.all(16.0),

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

TextField(

onChanged: viewModel.setName,

decoration: const InputDecoration(

labelText: 'Enter your name',

SizedBox(height: 16),

Text(

'Hello, ${viewModel.name}!',

style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),

);

}

Result

Conclusion

Congratulations!! You have learned about the MVVM in Flutter.

Nowadays, MVVM is widely utilized because it enables an event-driven approach, which is essential because many flutter components operate based on events.

Thanks for reading this blog. You can also check other blogs from here for more knowledge.

Always be ready for learning.