Implementing the Model-View-Presenter (MVP) Pattern in Flutter

The Model-View-Presenter (MVP) pattern is a popular architectural pattern used for structuring applications to separate concerns, improve testability, and maintainability. While Flutter comes with its own set of architectural patterns, such as BLoC (Business Logic Component) and Provider, MVP can still be a valuable choice for developers familiar with its concepts or those looking for a simpler approach for specific use cases. This blog post will guide you through implementing the MVP pattern in a Flutter application with detailed code examples.

What is the Model-View-Presenter (MVP) Pattern?

MVP is an architectural pattern derived from MVC (Model-View-Controller) but tailored to provide a clearer separation of concerns. It primarily consists of three parts:

• Model: Manages the data and business logic. It is responsible for fetching and manipulating data.
• View: The UI layer that displays data and notifies the Presenter of user actions. The View is passive, meaning it does not contain any business logic.
• Presenter: Acts as an intermediary between the Model and the View. It retrieves data from the Model, formats it for display in the View, and reacts to user inputs from the View by updating the Model.

Why Use MVP in Flutter?

• Separation of Concerns: Clearly separates the UI from the business logic, making the code easier to understand and maintain.
• Testability: Allows for easy unit testing of the Presenter and Model layers without involving UI components.
• Maintainability: Simplifies updates and modifications, as changes in one layer are less likely to affect others.

Implementing MVP in a Flutter Application

Let’s create a simple Flutter application that displays a list of tasks. We’ll structure this application using the MVP pattern.

Step 1: Set Up the Project

Create a new Flutter project:

flutter create flutter_mvp_example
cd flutter_mvp_example

Step 2: Define the Model

Create a task.dart file inside the lib/model directory:

class Task {
  final String id;
  final String title;
  final String description;
  bool isCompleted;

  Task({
    required this.id,
    required this.title,
    required this.description,
    this.isCompleted = false,
  });
}

Step 3: Define the View Interface

Create a task_view.dart file inside the lib/view directory. This interface defines the methods that the View must implement.

import 'package:flutter_mvp_example/model/task.dart';

abstract class TaskView {
  void showTasks(List tasks);
  void showError(String message);
  void refreshData();
}

Step 4: Define the Presenter

Create a task_presenter.dart file inside the lib/presenter directory. The Presenter handles user interactions and updates the View accordingly.

import 'package:flutter_mvp_example/model/task.dart';
import 'package:flutter_mvp_example/view/task_view.dart';

class TaskPresenter {
  TaskView _view;
  List _tasks = [];

  TaskPresenter(this._view);

  void loadTasks() {
    // Simulate loading tasks from a data source
    _tasks = [
      Task(id: '1', title: 'Task 1', description: 'Description for Task 1'),
      Task(id: '2', title: 'Task 2', description: 'Description for Task 2', isCompleted: true),
      Task(id: '3', title: 'Task 3', description: 'Description for Task 3'),
    ];
    _view.showTasks(_tasks);
  }

  void completeTask(Task task) {
    task.isCompleted = true;
    _view.refreshData(); // Notify the view to refresh
  }
}

Step 5: Implement the View

Create a task_page.dart file inside the lib/view directory. This is the UI of our application, which implements the TaskView interface.

import 'package:flutter/material.dart';
import 'package:flutter_mvp_example/model/task.dart';
import 'package:flutter_mvp_example/presenter/task_presenter.dart';
import 'package:flutter_mvp_example/view/task_view.dart';

class TaskPage extends StatefulWidget {
  @override
  _TaskPageState createState() => _TaskPageState();
}

class _TaskPageState extends State implements TaskView {
  late TaskPresenter _presenter;
  List _tasks = [];

  @override
  void initState() {
    super.initState();
    _presenter = TaskPresenter(this);
    _presenter.loadTasks();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Task List'),
      ),
      body: ListView.builder(
        itemCount: _tasks.length,
        itemBuilder: (context, index) {
          final task = _tasks[index];
          return ListTile(
            title: Text(task.title),
            subtitle: Text(task.description),
            leading: Checkbox(
              value: task.isCompleted,
              onChanged: (bool? value) {
                _presenter.completeTask(task);
              },
            ),
          );
        },
      ),
    );
  }

  @override
  void showTasks(List tasks) {
    setState(() {
      _tasks = tasks;
    });
  }

  @override
  void showError(String message) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text('Error'),
        content: Text(message),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text('OK'),
          ),
        ],
      ),
    );
  }

  @override
  void refreshData() {
    setState(() {});
  }
}

Step 6: Update main.dart

Update the main.dart file to display the TaskPage:

import 'package:flutter/material.dart';
import 'package:flutter_mvp_example/view/task_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter MVP Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TaskPage(),
    );
  }
}

Project Structure

Here’s the directory structure of the example project:

flutter_mvp_example/
├── lib/
│   ├── model/
│   │   └── task.dart
│   ├── view/
│   │   ├── task_view.dart
│   │   └── task_page.dart
│   ├── presenter/
│   │   └── task_presenter.dart
│   └── main.dart

Explanation

• Model (task.dart): Represents the data structure for a task.
• View (task_page.dart and task_view.dart): The TaskPage is the UI that displays tasks and implements the TaskView interface. It receives data from the Presenter and notifies the Presenter of user actions.
• Presenter (task_presenter.dart): The TaskPresenter retrieves tasks, updates the task status, and instructs the View to update the UI.

Conclusion

Implementing the Model-View-Presenter (MVP) pattern in Flutter provides a structured way to organize your application, enhancing testability and maintainability. While Flutter offers other architectural patterns like BLoC and Provider, MVP can be an excellent choice for those familiar with its concepts or for projects where a simpler architectural approach is desired. By following the steps outlined in this guide, you can create robust and well-structured Flutter applications using the MVP pattern.