Image for post
Image for post

Flutter Architecture : Implement MVP Pattern

MVP for Model View Presenter

A design pattern star on Android

Image for post
Image for post

Implement the MVP on Flutter

1 — Our files

Image for post
Image for post

2 — Make the Presenter

import 'package:mvp_flutter_tutorial/ui/counter/viewmodel/counter_viewmodel.dart';

class CounterPresenter {
void onButton1Clicked() {}
}

class BasicCounterPresenter implements CounterPresenter {

CounterViewModel _counterViewModel;

@override
void onButton1Clicked() {
// TODO: implement onButton1Clicked
}
}

3 — The View

import 'package:flutter/material.dart';
import 'package:mvp_flutter_tutorial/ui/counter/presenter/counter_presenter.dart';
import 'package:mvp_flutter_tutorial/ui/counter/views/counter_component.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(new BasicCounterPresenter(), title: 'Flutter Demo Home Page'),
);
}
}
import 'package:flutter/material.dart';
import 'package:mvp_flutter_tutorial/ui/counter/presenter/counter_presenter.dart';
import 'package:mvp_flutter_tutorial/ui/counter/viewmodel/counter_viewmodel.dart';
import 'package:mvp_flutter_tutorial/ui/counter/views/counter_view.dart';


class MyHomePage extends StatefulWidget {
final CounterPresenter presenter;

MyHomePage(this.presenter, {Key key, this.title}) : super(key: key);

final String title;

@override
_MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> implements CounterView {

CounterViewModel _viewModel;

@override
void initState() {
super.initState();
this.widget.presenter.counterView = this;
}

@override
void refreshCounter(CounterViewModel viewModel) {
setState(() {
this._viewModel = viewModel;
});
}

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
_viewModel?.counter.toString(),
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: () => this.widget.presenter.onButton1Clicked(),
tooltip: 'Increment',
child: new Icon(Icons.add),
),
);
}
}

4 — The presenter

import 'package:mvp_flutter_tutorial/ui/counter/viewmodel/counter_viewmodel.dart';
import 'package:mvp_flutter_tutorial/ui/counter/views/counter_view.dart';

class CounterPresenter {
void onButton1Clicked() {}
set counterView(CounterView value) {}
}

class BasicCounterPresenter implements CounterPresenter {

CounterViewModel _counterViewModel;
CounterView _counterView;

BasicCounterPresenter() {
this._counterViewModel = new CounterViewModel(0);
}

@override
void onButton1Clicked() {
this._counterViewModel.counter++;
this._counterView.refreshCounter(this._counterViewModel);
}

@override
set counterView(CounterView value) {
_counterView = value;
this._counterView.refreshCounter(this._counterViewModel);
}


}

5 — The ViewModel

class CounterViewModel {
int counter = 0;

CounterViewModel(this.counter);
}

Conclusion

Image for post
Image for post
The flutter exemple app works after moving to MVP pattern
Image for post
Image for post

Apparence matters

Sign up for CodeChai Publication 

By CodeChai

The CodeChai email digest is a summary of the most popular and interesting code content from CodeChai publication. We curate the best, so you can stay continually informed and inspired. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

A place for programmers and writers turning coffee/tea into code, one line at a time.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store