Pada pembahasan kali ini penulis akan membahas mengenai struktur [**MVP**](https://pub.dev/packages/mvp) pada Flutter. Langsung saja kita bahas mengenai [**MVP**](https://pub.dev/packages/mvp) pada Flutter untuk membangun aplikasi menggunakan arsitektur tersebut.

## Apa itu MVP?

[**MVP**](https://pub.dev/packages/mvp) adalah singkatan dari *Model View Presenter*. [**MVP**](https://pub.dev/packages/mvp) ini merupakan salah satu arsitektur yang terkenal, banyak digunakan dalam pengembangan aplikasi. Cara kerjanya adalah sebagai berikut:

1. Mewakili objek yang mewakili data berupa *model*
2. Memiliki tampilan yang merender tampilan **UI (user interfaces)** dan mengumpulkan input pengguna berupa *view*
3. Hingga memiliki komponen yang menerima input pengguna dan memutuskan apa yang harus dieksekusi, memperbarui model dan kemudian akan meneruskannya ke tampilan untuk merefresh semua data baru berupa *presenter*.

Penjelasan lebih detailnya seperti ini :

#### Model

Merupakan struktur yang berfungsi untuk mendefinisikan data yang kemudian akan kita tampilkan pada *view* atau tampilan **UI (user interfaces)** yang kemudian akan di proses kepada *presenter*.


#### View

Merupakan tampilan atau **UI (user interfaces)** yang berisi data-data pasif karena dia hanya menerima data-data tersebut dari **presenter**. View ini akan memberikan perintah-perintah yang diberikan oleh user seperti perintah input data, menekan tombol dan lainnya maka perintah tersebut akan diterima kepada presenter.


#### Presenter

Pada **Presenter**, dia secara otomatis akan mengolah data yang diterima tersebut dari view dan kemudian akan mengambil data dari model.

Pada [**MVP**](https://pub.dev/packages/mvp) ini **Presenter** dan **View** dipisahkan agar aplikasi yang kita buat lebih rapih dan beraturan. Untuk tampilan alur dari konsep [**MVP**](https://pub.dev/packages/mvp) seperti gambar dibawah ini :



![](https://i.imgur.com/uixwqOO.png)



Pada gambar diatas, terdapat View yang merupakan UI (User Interfaces). Ketika user melakukan interaksi dengan menginput atau menekan tombol dan lain sebagainya kemudian akan dikirim ke presenter untuk proses.


[Mengapa Flutter Menjadi Pilihan Utama dalam Pengembangan Aplikasi Mobile Cross-Platform?](https://www.codepolitan.com/blog/mengapa-flutter-menjadi-pilihan-utama-dalam-pengembangan-aplikasi-mobile-crossplatform/)


Dan pada gambar diatas pula terdapat Model, yang ketika didapati data yang sudah dirubah kemudian data tersebut akan di update ke Model. Kemudian data tersebut akan di kirim oleh presenter kembali kepada UI (user interfaces) nya yaitu kepada View.

## Apa keuntungan MVP?

- Operasi **UI (user interfaces)** dipisahkan dari logika aplikasi
- Lebih mudah untuk diuji (Dalam kasus Flutter, tes unit untuk presenter, tes widget untuk tampilan)

Pada penjelasan kali ini penulis akan membuat suatu aplikasi sederhana agar teman-teman juga lebih memahami konsep [**MVP**](https://pub.dev/packages/mvp) yang penulis bahas kali ini.

Langsung saja silahkan Anda buat folder baru dengan nama App sederhana.

```java
flutter create appsederhana
```

![](https://i.imgur.com/x56az6B.png)

```java
cd appsederhana
```

![](https://i.imgur.com/zKVPCeD.png)

Oke langsung saja kemudian buka folder yang sudah dibuat tersebut di Visual Studio Code.

Selanjutnya silahkan buat folder baru dengan nama Model, View dan Presenter didalam folder lib. Struktur file nya akan terlihat seperti dibawah ini :

![](https://i.imgur.com/yC6WBuj.png)

Masukkan Source Code pada file ``main.dart`` :

```dart
import 'package:flutter/material.dart';
import 'myhomepage.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter MVP',
      theme: ThemeData(
        primarySwatch: Colors.lightGreen,
      ),
      //halaman utama yang akan ditampilkan
      home: MyHomePage(title: 'Flutter MVP'),
    );
  }
}


```

buat file baru dengan nama ``myhomepage.dart`` kemudian masukkan Source Code dibawah ini :

``myhomepage.dart``

```dart
import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({this.title, Key key}): super (key:key);
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      // menggunakan text view untuk menginput dua buah angka
      // dan menginput sebuah tombol untuk eksekusi penjumlahan
      body: Column(
        children: <Widget>[
          TextField(

          ),
          TextField(),
          RaisedButton(
            onPressed: (){},
              // icons
              child: Icon(Icons.add),
          ),
          // hasil penjumlahan
          Text("Hasil nya : ", style: TextStyle(fontSize: 20.0),)
        ],
      ),
    );
  }
}
```

Coba Run (Jalankan) aplikasinya, tampilannya akan terlihat seperti dibawah ini :

![](https://i.imgur.com/i6ZJvAH.jpg)

Selanjutnya buat File baru didalam Folder Model yang sudah dibuat dengan nama ``models.dart``. Masukkan Source Code dibawah ini :

``models.dart``

```dart
import 'package:flutter/material.dart';

class AppModel{
  //controller text editing bagian A
  final TextEditingController controllerA = new TextEditingController();
  //controller text editing bagian B
  final TextEditingController controllerB = new TextEditingController();

  //nilai
  int hasil=0;
}
```

Selanjutnya Import ``models.dart`` ,``views.dart`` , ``presenters.dart ``:

```dart
import 'package:appsederhana/model/models.dart';
import 'package:appsederhana/view/views.dart';
import 'package:appsederhana/presenter/presenters.dart';
```

Tambahkan Source Code pada Class *MyHomePage* :

```dart
class MyHomePage extends StatefulWidget {
  final String title;
  //presenter
  final AppPresenters presenters;

  MyHomePage(this.presenters,{this.title, Key key}): super (key:key);
  _MyHomePageState createState() => _MyHomePageState();
}
```

Buat Controller pada File ``myhomepage.dart`` tambahkan Source Code dibawah ini :

```dart
AppModels _appModels;
```

Selanjutnya tambahkan Controller didalam TextField pada Source Code seperti dibawah ini masih didalam File ``myhomepage`` :

```dart
TextField(
//controller A
controller: _appModels.controllerA,
),
TextField(
//controller B
controller: _appModels.controllerB,
),

```

Source Code detailnya seperti dibawah ini :

```dart
import 'package:appsederhana/presenter/presenters.dart';
import 'package:flutter/material.dart';
import 'package:appsederhana/model/models.dart';
import 'package:appsederhana/view/views.dart';
import 'package:appsederhana/presenter/presenters.dart';

class MyHomePage extends StatefulWidget {
  final String title;
  //presenter
  final AppPresenters presenters;

  MyHomePage(this.presenters,{this.title, Key key}): super (key:key);
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  
  AppModels _appModels;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      // menggunakan text view untuk menginput dua buah angka
      // dan menginput sebuah tombol untuk eksekusi penjumlahan
      body: Column(
        children: <Widget>[
          TextField(
            //controller A
            controller: _appModels.controllerA,
          ),
          TextField(
            //controller B
            controller: _appModels.controllerB,
          ),
          RaisedButton(
            onPressed: (){},
              //icons
              child: Icon(Icons.add),
          ),
          // hasil penjumlahan
          Text("Hasil nya : ", style: TextStyle(fontSize: 20.0),)
        ],
      ),
    );
  }
}

```

Ketika di Run aplikasi masih Error, coba buat File baru didalam Folder **presenter** dengan nama File ``presenters.dart`` sebagai penghubungnya dan buat juga File baru didalam Folder **view** dengan nama File ``views.dart`` sebagai UI (User Interfaces). Masukkan Source Code dibawah ini :


**Baca Juga :** 


``views.dart``

```dart
import 'package:appsederhana/model/models.dart';

//view menerima data dari model
class AppViews{
  void refreshData(AppModels model){
    
  }
}

```

Pada View ini dia akan menerima semua data-data terbaru yang ada pada Model yang dikirimkan oleh Presenter. Selanjutnya masukkan Source Code dibawah ini :

``presenters.dart``

```dart
import 'package:appsederhana/view/views.dart';
import 'package:appsederhana/model/models.dart';

//class view
class AppPresenters{
  //set tampilan view
  set view(AppViews value){}
}

//inti dari presenter
class BasicAppPresenters implements AppPresenters{
  AppModels _models;
  AppViews _views;

  BasicAppPresenters(){
    //models yg kita isi dengan AppModels
    this._models=AppModels();
  }

  @override
  //method set view
  void set view(AppViews value) {
    // TODO: implement view
    //view dengan isi model baru
    _views=value;
    this._views.refreshData(this._models);
  }
}

```

Kemudian buka kembali File ``main.dart``, Import ``presenter.dart`` :

```dat
import 'package:appsederhana/presenter/presenters.dart';

```

Rubah *home* pada *Widget* didalam *class MyApp* menjadi seperti dibawah ini :

```dart
home: MyHomePage(new BasicAppPresenters(),title: 'Flutter MVP'),

```

Source Code detailnya akan terlihat dibawah ini :

```dart
import 'package:flutter/material.dart';
import 'myhomepage.dart';
import 'package:appsederhana/presenter/presenters.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter MVP',
      theme: ThemeData(
        primarySwatch: Colors.lightGreen,
      ),
      home: MyHomePage(new BasicAppPresenters(),title: 'Flutter MVP'),
    );
  }
}


```

Buka kembali file ``myhomepage.dart`` tambahkan *implements AppViews* pada class *_MyHomePageState* berfungsi memperbaharui *_MyHomePageState* berdasarkan inves *view* nya :

```dart
class _MyHomePageState extends State<MyHomePage> implements AppViews{

```

Ketika Anda menambahkan Source Code diatas otomatis class *MyHomePageState* akan Error, klik Icon lampu berwarna kuning dan Create 1 Missing Override(s) :

![](https://i.imgur.com/xypjBsb.png)

Maka secara otomatis akan muncul Source Code seperti dibawah ini :

```dart
@override
  void refreshData(AppModels model) {
    // TODO: implement refreshData
  }

```

Kemudian masukkan didalamnya Source Code seperti dibawah ini :

```dart
setState(() {
     this._appModels=model; 
    });
  }

```

Tambahkan lagi dibawahnya Override baru :

```dart
void initState() {
    // TODO: implement refreshData
    super.initState();
    this.widget.presenters.view=this;
  }

```

Source Code detailnya akan terlihat seperti dibawah ini :

``myhomepage.dart``

```dart
import 'package:appsederhana/presenter/presenters.dart';
import 'package:flutter/material.dart';
import 'package:appsederhana/model/models.dart';
import 'package:appsederhana/view/views.dart';
import 'package:appsederhana/presenter/presenters.dart';

class MyHomePage extends StatefulWidget {
  final String title;
  final AppPresenters presenters;

  MyHomePage(this.presenters,{this.title, Key key}): super (key:key);
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> implements AppViews{
  
  AppModels _appModels;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      // menggunakan text view untuk menginput dua buah angka
      // dan menginput sebuah tombol untuk eksekusi penjumlahan
      body: Column(
        children: <Widget>[
          TextField(
            //controller A
            controller: _appModels.controllerA,
          ),
          TextField(
            //controller B
            controller: _appModels.controllerB,
          ),
          RaisedButton(
            //tombol button penjumlahan
            onPressed: (){},
              //icons
              child: Icon(Icons.add),
          ),
          // hasil penjumlahan
          Text("Hasil nya : ", style: TextStyle(fontSize: 20.0),)
        ],
      ),
    );
  }

  @override
  void refreshData(AppModels model) {
    // TODO: implement refreshData
    setState(() {
     this._appModels=model; 
    });
  }
  
  void initState() {
    // TODO: implement refreshData
    super.initState();
    this.widget.presenters.view=this;
  }
}

```

Buka kembali File ``presenters.dart`` tambahkan Source Code didalam Class *AppPresenters* sebagai *button click*:

```dart
void buttonClick(){}

```

kemudian pada class BasicAppPresenters akan terlihat eror, ikuti seperti dibawah ini untuk menambahkan override:

![](https://i.imgur.com/B5HMOZJ.png)

Maka seperti yang sudah pernah dilakukan sebelumnya, otomatis akan menambahkan override baru seperti source code dibawah ini :

```dart
@override
  void buttonClick() {
    // TODO: implement buttonClick
  }

```

Tambahkan didalam parameter tersebut Source Code dibawah ini :

```dart
int a1=int.parse(this._models.controllerA.text);
int a2=int.parse(this._models.controllerB.text);
//eksekusi
this._models.hasil=a1+a2;
//data terbaru dikirmkan ke view untuk di refresh
this._views.refreshData(this._models);

```

Source Code detailnya akan terlihat seperti dibawah ini :

``presenters.dart``

```dart
import 'package:appsederhana/view/views.dart';
import 'package:appsederhana/model/models.dart';

class AppPresenters{
  set view(AppViews value){}
  //fungsi button click presenter
  void buttonClick(){}
}

class BasicAppPresenters implements AppPresenters{
  AppModels _models;
  AppViews _views;

  BasicAppPresenters(){
    this._models=AppModels();
  }

  @override
  void set view(AppViews value) {
    // TODO: implement view
    _views=value;
    this._views.refreshData(this._models);
  }

  @override
  void buttonClick() {
    //TODO: implement buttonClick
    //fungsi button click
    //menjumlahkan nilai yang di inputkan oleh usernya
    int a1=int.parse(this._models.controllerA.text);
    int a2=int.parse(this._models.controllerB.text);
    //eksekusi
    this._models.hasil=a1+a2;
    //data terbaru dikirmkan ke view untuk di refresh
    this._views.refreshData(this._models);
  }
}

```

Buka kembali File ``myhomepagestate.dart`` tambahkan Source Code dibawah ini pada Widget didalam Class *_MyHomePageState*  pada *RaisedButton* yang berfungsi sebagai tombol button untuk hasil penjumlahan:

```dart
onPressed: ()=>this.widget.presenters.buttonClick(),
```

Tambahkan juga pada Text hasil menjadi seperti dibawah ini :

```dart
Text("Hasil nya ${_appModels.hasil}", style: TextStyle(fontSize: 20.0),)
```

Source Code detailnya seperti dibawah ini :

``myhomepage.dart``

```dart
import 'package:appsederhana/presenter/presenters.dart';
import 'package:flutter/material.dart';
import 'package:appsederhana/model/models.dart';
import 'package:appsederhana/view/views.dart';
import 'package:appsederhana/presenter/presenters.dart';

class MyHomePage extends StatefulWidget {
  final String title;
  final AppPresenters presenters;

  MyHomePage(this.presenters,{this.title, Key key}): super (key:key);
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> implements AppViews{
  
  AppModels _appModels;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      // menggunakan text view untuk menginput dua buah angka
      // dan menginput sebuah tombol untuk eksekusi penjumlahan
      body: Column(
        children: <Widget>[
          TextField(
            //controller A
            controller: _appModels.controllerA,
          ),
          TextField(
            //controller B
            controller: _appModels.controllerB,
          ),
          RaisedButton(
            //fungsi tombol button untuk hasil penjumlahan
            onPressed: ()=>this.widget.presenters.buttonClick(),
              //icons
              child: Icon(Icons.add),
          ),
          // hasil penjumlahan
          Text("Hasil nya ${_appModels.hasil}", style: TextStyle(fontSize: 20.0),)
        ],
      ),
    );
  }

  @override
  void refreshData(AppModels model) {
    // TODO: implement refreshData
    setState(() {
     this._appModels=model; 
    });
  }
  
  void initState() {
    // TODO: implement refreshData
    super.initState();
    this.widget.presenters.view=this;
  }
}
```

Run aplikasi, dan coba tambahkan nilai maka akan keluar hasilnya seperti dbawah ini :

![](https://i.imgur.com/kbKgcTL.jpg)


Dirangkum dari beberapa sumber :

[Implementasi MVP (Model-View-Presenter)](https://medium.com/@budioktaviyans/implementasi-mvp-model-view-presenter-2169a346acbb)

[PackageMVP](https://pub.dev/packages/mvp)


Membuat Aplikasi Perhitungan Sederhana dengan Arsitektur MVP di Flutter

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Membuat Aplikasi Perhitungan Sederhana dengan Arsitektur MVP di Flutter

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Robouts, Kapal Robot Pintar Berteknologi IoT

Membuat Alarm Elektronik Menggunakan Arduino dengan Sensor Ultrasonik dan MP3 Module

Belajar Flutter Di Visual Studio Code : Membuat kelas DropdownButton

Mengakses Database SQLite dengan Flutter

Navigation dan Routes Pada Flutter

Membuat Aplikasi Menggambar di Flutter