What is MVP ?

Overview

MVP (Model-View-Presenter) is an architectural pattern derived from MVC. It improves on MVC by making the View passive and completely decoupling the Presenter from any Android/Flutter UI framework, making it highly testable.

---

The Three Components

---

Key Difference from MVC

In MVC, the Controller can directly manipulate the View. In MVP, the Presenter never directly touches the View — it only communicates through an interface (contract).

textCopy
User Input → View → Presenter → Model
                ↑         ↓
           View Interface (IView)

---

MVP in Flutter (Example)

1. Define the Contract (Interface)

dartCopy
// View interface — what the Presenter can tell the View to do
abstract class IUserView {
  void showLoading();
  void hideLoading();
  void showUser(UserModel user);
  void showError(String message);
}

2. Model

dartCopy
class UserModel {
  final String name;
  final String email;

  UserModel({required this.name, required this.email});
}

class UserRepository {
  Future<UserModel> fetchUser(int id) async {
    // Simulate API call
    await Future.delayed(Duration(seconds: 1));
    return UserModel(name: 'Alice', email: 'alice@example.com');
  }
}

3. Presenter

dartCopy
class UserPresenter {
  final IUserView _view;
  final UserRepository _repository;

  UserPresenter(this._view, this._repository);

  Future<void> loadUser(int id) async {
    _view.showLoading();
    try {
      final user = await _repository.fetchUser(id);
      _view.showUser(user);
    } catch (e) {
      _view.showError('Failed to load user: $e');
    } finally {
      _view.hideLoading();
    }
  }
}

4. View (Flutter Widget)

dartCopy
class UserScreen extends StatefulWidget {
  @override
  _UserScreenState createState() => _UserScreenState();
}

class _UserScreenState extends State<UserScreen> implements IUserView {
  late UserPresenter _presenter;
  bool _isLoading = false;
  UserModel? _user;
  String? _error;

  @override
  void initState() {
    super.initState();
    _presenter = UserPresenter(this, UserRepository());
    _presenter.loadUser(1);
  }

  @override
  void showLoading() => setState(() => _isLoading = true);

  @override
  void hideLoading() => setState(() => _isLoading = false);

  @override
  void showUser(UserModel user) => setState(() => _user = user);

  @override
  void showError(String message) => setState(() => _error = message);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('MVP Example')),
      body: _isLoading
          ? Center(child: CircularProgressIndicator())
          : _error != null
              ? Center(child: Text(_error!))
              : Center(child: Text('Hello, ${_user?.name}')),
    );
  }
}

---

Pros and Cons

---

Testing the Presenter (Unit Test)

dartCopy
class MockUserView implements IUserView {
  bool loadingShown = false;
  UserModel? displayedUser;

  @override void showLoading() => loadingShown = true;
  @override void hideLoading() => loadingShown = false;
  @override void showUser(UserModel user) => displayedUser = user;
  @override void showError(String message) {}
}

void main() {
  test('UserPresenter loads user correctly', () async {
    final mockView = MockUserView();
    final presenter = UserPresenter(mockView, UserRepository());

    await presenter.loadUser(1);

    expect(mockView.displayedUser?.name, 'Alice');
    expect(mockView.loadingShown, false); // hideLoading was called
  });
}

---

MVC vs MVP vs MVVM

In Flutter, MVP is a solid, testable pattern. However, MVVM with

textCopy

ChangeNotifier

,

textCopy

Riverpod

, or

textCopy

BLoC

tends to be more idiomatic because Flutter's reactive model is built for data binding.