Flutter — Fetch Data from Internet
Halo semuanya, pada kesempatan kali ini saya akan membahas mengenai mengambil data dari internet atau API seperti firebase pada framework Flutter. Tentunya yang mengunjungi artikel ini sudah mengetahui apa itu flutter dan penggunaannya, jika belum ya, singkatnya Flutter merupakan framework untuk mobile app yang dikembangkan oleh Google, format utama ynag digunakan adalah Dart. Untuk lebih lengkapnya dapat membuka halaman ini. Oke langsung saja
Persiapan
Sebelum mulai ada beberapa hal yang harus disiapkan untuk melanjutkan tutorial kali ini. Pertama adalah dependencies yang digunakan cukup sederhana yaitu kalian harus menambahkan http: ^0.13.1 .
Catatan: Versi yang digunakan bisa saja berbeda, namun pada tutorial kali ini menggunakan versi ^0.13.1. Kalian bisa cek semua versinya pada link ini.
Pada pubspec.yaml bagian dependencies mungkin akan terlihat seperti ini
dependencies:
flutter:
sdk: flutter
http: ^0.13.1Jangan lupa untuk melakukan flutter pub get untuk mendapatkan package tersebut bisa menggunakan cmd atau melalui terminal IDE yang digunakan.
Kemudian yang kedua adalah dipastikan emulator atau device yang digunakan terkoneksi ke internet.
Step 1
Setelah kalian menyiapkan hal-hal tersebut kemudian kita akan memulainya. Pertama kita akan membuat user_list.dart yang akan kita gunakan sebagai halaman untuk menampilkan hasil data yang didapat. Terlihat seperti ini
Kita akan menggunakan FutureBuilder yang akan menampung tipe data Future agar dapat diolah menjadi tipe yang seharusnya.
Kemudian kita akan menambahkan link yang akan kita gunakan untuk mengambil data beserta men-decode jsonnya ke tipe data yang seharusnya, dalam kali ini yaitu List<dynamic> yang berarti tipe data apa saja isi listnya.
userUri merupakan Uri yang akan kita gunakan pada http.get(). Kemudian fungsi fetchUsers() yang akan me-return Future<List<dynamic>> karena hasil dari json.decode tersebut.
Kemudian kita akan melihat seperti apa json yang kita ambil ini, kalian bisa menggunakan Postman atau pengecek API lainnya untuk digunakan.
"results": [
{"gender": "male",
"name": {
"title": "Mr",
"first": "Alvin",
"last": "Price"
},
"location": {
"street": {
"number": 7681,
"name": "E Pecan St"
},
"city": "Queanbeyan",
"state": "Northern Territory",
"country": "Australia",
"postcode": 6592,
"coordinates": {
"latitude": "-83.8629",
"longitude": "-33.1498"
},
"timezone": {
"offset": "-3:00",
"description": "Brazil, Buenos Aires, Georgetown"
}
},
"email": "alvin.price@example.com",
"login": {
"uuid": "0b5c3b4d-71c7-4b96-835f-c1bf580a2532",
"username": "goldenzebra793",
"password": "cccc",
"salt": "BgWDSLAV",
"md5": "7548cd3648ac08c3a6cbc083fd358cb2",
"sha1": "5e580b2db8f9dc04244b5878a1c7b53e40c239d8",
"sha256":
"f73d0d45df59771222427d3441d108e9fecaaca81484ae163c8216ce9e4bff02"
},
"dob": {
"date": "1951-04-16T12:45:53.672Z",
"age": 70
},
"registered": {
"date": "2014-11-26T15:08:27.948Z",
"age": 7
},
"phone": "03-5061-3217",
"cell": "0430-327-507",
"id": {
"name": "TFN",
"value": "410250339"
},
"picture": {
"large": "https://randomuser.me/api/portraits/men/94.jpg",
"medium": "https://randomuser.me/api/portraits/med/men/94.jpg",
"thumbnail": "https://randomuser.me/api/portraits/thumb/men/94.jpg"
},
"nat": "AU"},
Terlihat data berupa map dengan berbagai Key, saya hanya mengambil index pertama dari json. Kemudian kita akan mengolah data tersebut agar dapat ditampilkan. Berikut adalah contoh di mana akan diambil nama, foto, negara, dan umur dari user.
Karena nama terdiri dari tiga bagian, kemudian kita akan menggabungnya yaitu mulai dari title, first, dan last name nya. Kemudian negara dan umur dari user.
Kemudian kita akan menuju ke widget, yaitu bagaimana menampilkan data tersebut. Hingga akhirnya akan terlihat seperti ini.
future akan diisi oleh fungsi fetchUser() yang me-return tipe Future agar dapat mudah diolah. Kemudian apa bila data belum selesai diambil akan menampilkan CircularProgressIndicator sebagai gantinya. Kemudian kita akan menampilkan data menggunakan ListView dengan itemBuilder adalah Card dan akan menggunakan ListTile sebagai pemodelannya.
Atribut yang digunakan yaitu pada leading akan digunakan sebagai tempat foto dari user dengan menggunakan CircleAvatar. Kemudian title akan digunakan sebagai nama usernya, lalu subtitle sebagai negara user , dan trailing yang akan digunakan untuk umur. Lalu kita sambungkan user_list.dart pada body dari halaman utama, pada kali ini saya akan menempatkan pada main.dart hingga akhirnya akan terlihat seperti ini.
Dan akhirnya code kita akan terlihat seperti ini, yaitu user_list beserta main.dartnya.
Baik itu saja yang dapat saya sampaikan pada artikel tutoral kali ini semoga bermanfaat bagi kita semua. Terima kasih.