Image Load

Hello world,

Sudah lama tidak menulis tutorial karena banyak kesibukan dari bulan lalu. Karena ada beberapa yang menanyakan tentang Flutter MVVM maka akan saya buat versi lengkapnya mengenai proses menampilkan, mengirim data dengan Flutter MVVM secara sederhana. Sebelumnya saya sudah pernah menulis tentang bagaimana cara menampilkan data dari JSON dengan MVVM yang bisa dilihat di sini. Akan tetapi saat itu saya hanya membuat dengan API JSON sampel dari website jsonplaceholder. Untuk kali ini saya akan menggunakan api buatan sendiri yang bisa dilihat di sini.

Oke langsung saja masuk ke pembahasan pertama yaitu bagaimana cara menampilkan data JSON pada flutter MVVM. Untuk penjelasan mengenai MVVM bisa dilihat di sini.

Langkah pertama kita buat 3 folder yaitu models, viewmodels dan views di dalam folder lib seperti gambar berikut.



Selanjutnya kita isi file main.dart dengan code berikut.

import 'views/halamanutama.dart';
import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My App",
home: new MyApp(),
));
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MY App',
home: HalamanUtama()
);
}
}

Kemudian kita buat halaman utamanya (HalamanUtama) pada folder lib/views/ seperti berikut.

import 'package:flutter/material.dart';

class HalamanUtama extends StatefulWidget {
@override
_HalamanUtamaState createState() => _HalamanUtamaState();
}

class _HalamanUtamaState extends State<HalamanUtama> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Halaman Utama"),
),
body: Text("data"),
);
}
}

Selanjutnya kita siapkan API dan Modelnya. Untuk API saya pakai contoh dari yang saya buat di sini yaitu http://byriza.com/webapi/read.php. Untuk proses pembuatan apinya bisa dilihat pada artikel [Website][5] Membuat API JSON sederhana dengan PHP (part 1) Read/View. Hasil apinya akan terlihat seperti berikut.

[{
	"id_user": "1",
	"nama_user": "Riza",
	"email_user": "rizariza@gmail.com",
	"alamat_user": "Jakarta"
}, {
	"id_user": "2",
	"nama_user": "Bambang",
	"email_user": "bambang@gmail.com",
	"alamat_user": "Tangerang"
}, {
	"id_user": "3",
	"nama_user": "Rangga",
	"email_user": "ranggarangga@gmail.com",
	"alamat_user": "Jakarta"
}]

Untuk membuat model biasanya saya pakai yang instan menggunakan https://app.quicktype.io/. Caranya tinggal kita paste saja json kita ke form yang sudah disediakan dan kita pilih bahasa pemrograma dart.


Kemudian tinggal kita copy paste saja hasilnya seperti di bawah ini ke dalam file model kita yaitu di sini saya beri nama usermodel.dart dan kita simpan di folder lib/models/.

// To parse this JSON data, do
//
//     final userModel = userModelFromJson(jsonString);

import 'dart:convert';

List<UserModel> userModelFromJson(String str) => List<UserModel>.from(json.decode(str).map((x) => UserModel.fromJson(x)));

String userModelToJson(List<UserModel> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class UserModel {
    UserModel({
        this.idUser,
        this.namaUser,
        this.emailUser,
        this.alamatUser,
    });

    String idUser;
    String namaUser;
    String emailUser;
    String alamatUser;

    factory UserModel.fromJson(Map<String, dynamic> json) => UserModel(
        idUser: json["id_user"],
        namaUser: json["nama_user"],
        emailUser: json["email_user"],
        alamatUser: json["alamat_user"],
    );

    Map<String, dynamic> toJson() => {
        "id_user": idUser,
        "nama_user": namaUser,
        "email_user": emailUser,
        "alamat_user": alamatUser,
    };
}

Nah sekarang kita harus membuat fungsi untuk memanggil api tersebut yaitu dengan Future dengan nama file userviewmodel.dart yang kita simpan di folder lib/viewmodels/. Contohnya seperti berikut.

import '../models/usermodel.dart';
import 'package:http/http.dart' as http;

class UserViewModel {

Future<List<UserModel>> getUsers() async {
try {
http.Response hasil = await http.get(
Uri.encodeFull("http://byriza.com/webapi/read.php"),
headers: {"Accept": "application/json"});
if (hasil.statusCode == 200) {
print("data category success");
final data = userModelFromJson(hasil.body);
return data;
} else {
print("error status " + hasil.statusCode.toString());
return null;
}
} catch (e) {
print("error catch $e");
return null;
}
}
}

Karena kita pakai package http maka jangan lupa menambahkan dependency pada pubspec.yaml sepert berikut. Untuk melihat versi terbaru dari dependencies http bisa dilihat di sini.

dependencies:
  http: ^0.12.2

Langkah terakhir tinggal kita panggil Future dari UserViewModel untuk ditampilkan ke dalam view dengan cara menambahkan kode berikut pada file halamanutama.dart.

import '../models/usermodel.dart';
import '../viewmodels/userviewmodel.dart';
import 'package:flutter/material.dart';

class HalamanUtama extends StatefulWidget {
@override
_HalamanUtamaState createState() => _HalamanUtamaState();
}

class _HalamanUtamaState extends State<HalamanUtama> {
List<UserModel> dataUser = new List();
void getDataUser() {
UserViewModel().getUsers().then((value) {
setState(() {
dataUser = value;
});
});
}

@override
void initState() {
// TODO: implement initState
super.initState();
getDataUser();
}


@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Halaman Utama"),
),
body: dataUser == null ? Center(child: CircularProgressIndicator(),) : ListView.builder(
itemCount: dataUser.length,
itemBuilder: (context, i) {
return ListTile(
title: Text(dataUser[i].namaUser),
);
},
),

);
}
}

Selamat mencoba :)