Image Load

Hello world,

Sebelumnya saya pernah membuat tutorial untuk menampilkan JSON ke dalam flutter (lihat di sini) dimana pada tutorial tersebut saya saya membuat halaman sederhana dan sebuah fungsi sederhana pada sebuah file dart. Kali ini saya coba buat versi lainnya yaitu dengan MVVM (Model View ViewModel). MVVM adalah pattern yang dipakai untuk mengembangkan aplikasi yang mirip-mirip dengan MVC. Berikut penjelasan singkatnya.

Model

Model / entity yang biasanya menggambarkan bentuk dari data yang digunakan atau ada yang bilang dengan istilah PODO (Plain Old Dart Objects).

View

Merepresentasikan UI/Layout dari sebuah aplikasi

ViewModel

Bagian ini berfungsi untuk melakukan pemrosesan data (POST/GET dll) dihubungkan dengan Model dan mengembalikan data kepada View.

Mungkin sekilas saja kira-kira seperti itu. Kalau ada penjelasan yang lebih bagus mungkin bisa dicari dari website tutorial lain. Oke langsung saja kita buat struktur foldernya seperti 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 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 https://jsonplaceholder.typicode.com/users.

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv",
    "address": {
      "street": "Victor Plains",
      "suite": "Suite 879",
      "city": "Wisokyburgh",
      "zipcode": "90566-7771",
      "geo": {
        "lat": "-43.9509",
        "lng": "-34.4618"
      }
    },
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net",
    "company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }
  },]

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 ke dalam file model kita yaitu di sini saya beri nama usermodel.dart.

// 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 {
int id;
String name;
String username;
String email;
Address address;
String phone;
String website;
Company company;

UserModel({
this.id,
this.name,
this.username,
this.email,
this.address,
this.phone,
this.website,
this.company,
});

factory UserModel.fromJson(Map<String, dynamic> json) => UserModel(
id: json["id"],
name: json["name"],
username: json["username"],
email: json["email"],
address: Address.fromJson(json["address"]),
phone: json["phone"],
website: json["website"],
company: Company.fromJson(json["company"]),
);

Map<String, dynamic> toJson() => {
"id": id,
"name": name,
"username": username,
"email": email,
"address": address.toJson(),
"phone": phone,
"website": website,
"company": company.toJson(),
};
}

class Address {
String street;
String suite;
String city;
String zipcode;
Geo geo;

Address({
this.street,
this.suite,
this.city,
this.zipcode,
this.geo,
});

factory Address.fromJson(Map<String, dynamic> json) => Address(
street: json["street"],
suite: json["suite"],
city: json["city"],
zipcode: json["zipcode"],
geo: Geo.fromJson(json["geo"]),
);

Map<String, dynamic> toJson() => {
"street": street,
"suite": suite,
"city": city,
"zipcode": zipcode,
"geo": geo.toJson(),
};
}

class Geo {
String lat;
String lng;

Geo({
this.lat,
this.lng,
});

factory Geo.fromJson(Map<String, dynamic> json) => Geo(
lat: json["lat"],
lng: json["lng"],
);

Map<String, dynamic> toJson() => {
"lat": lat,
"lng": lng,
};
}

class Company {
String name;
String catchPhrase;
String bs;

Company({
this.name,
this.catchPhrase,
this.bs,
});

factory Company.fromJson(Map<String, dynamic> json) => Company(
name: json["name"],
catchPhrase: json["catchPhrase"],
bs: json["bs"],
);

Map<String, dynamic> toJson() => {
"name": name,
"catchPhrase": catchPhrase,
"bs": bs,
};
}

Nah sekarang kita harus membuat fungsi untuk memanggil api tersebut yaitu dengan Future dengan nama file userviewmodel.dart. Contohnya seperti berikut.

import 'dart:convert';
import 'package:blog_sample/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("https://jsonplaceholder.typicode.com/users"),
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.

dependencies:
  http: ^0.12.1

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

import 'package:blog_sample/models/usermodel.dart';
import 'package:blog_sample/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].name),
);
},
),

);
}
}


Selamat mencoba :)