MVP architecture in Flutter

MVP (Model-View-Presenter) is a design pattern commonly used in mobile app development to separate the presentation layer from the business logic. In Flutter, the MVP pattern helps to improve the structure and maintainability of the code by breaking it down into smaller, more manageable parts.

Example: Let’s consider an example of a simple weather app. The Model holds data about the weather conditions, such as temperature, humidity, and wind speed. The View displays this information to the user in an easy-to-read format, such as a list of cards with weather conditions for each day. The Presenter is responsible for fetching the weather data from the server and updating the Model with the new information.

Here’s how the code for the MVP pattern in this weather app example might look:

// Model
class Weather {
  final int temperature;
  final int humidity;
  final int windSpeed;

  Weather({this.temperature, this.humidity, this.windSpeed});
}

// View
class WeatherView extends StatefulWidget {
  @override
  _WeatherViewState createState() => _WeatherViewState();
}

class _WeatherViewState extends State<WeatherView> {
  Weather _weather;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _weather == null
          ? Center(child: CircularProgressIndicator())
          : Column(
              children: <Widget>[
                Text("Temperature: ${_weather.temperature}"),
                Text("Humidity: ${_weather.humidity}"),
                Text("Wind Speed: ${_weather.windSpeed}"),
              ],
            ),
    );
  }

  void updateWeather(Weather weather) {
    setState(() {
      _weather = weather;
    });
  }
}

// Presenter
class WeatherPresenter {
  WeatherView _view;

  WeatherPresenter(this._view);

  void fetchWeather() {
    // Fetch the weather data from the server
    // ...

    // Update the Model with the new data
    final weather = Weather(
      temperature: 72,
      humidity: 50,
      windSpeed: 10,
    );

    // Update the View with the new data
    _view.updateWeather(weather);
  }
}

Template: To implement MVP in Flutter, follow these steps:

1. Define the Model: This is a simple data class that holds the data you want to display to the user.

class Model {
  // Data properties
}

2. Define the View: This is a widget that displays the data from the Model. The View should extend StatefulWidget and include a build method that returns the widgets that should be displayed. It should also include a method for updating the data in response to changes in the Model.

class View extends StatefulWidget {
  @override
  _ViewState createState() => _ViewState();
}

class _ViewState extends State<View> {
  Model _model;

  @override
  Widget build(BuildContext context) {
    return Container(
      // Widgets to display data
    );
  }

  void updateModel(Model model) {
    setState(() {
      _model = = model;
});
}

@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Counter: ${_model.counter}'),
RaisedButton(
onPressed: () => _presenter.incrementCounter(),
child: Text('Increment'),
),
],
);
}
}

class Presenter {
_MVPState _state;

Presenter(this._state);

void incrementCounter() {
Model model = _state._model;
model.counter++;
_state.updateModel(model);
}
}

Follow, Like and share Thank you