Card image cap

[Flutter][28] Parsing JSON pada Flutter
Friday, 31 May 2019

Hello world,

Hari ini saya akan mencoba membahas mengenai bagaimana cara sederhana dalam menampilkan data dari JSON ke dalam aplikasi berbasis Flutter. Seperti yang kita ketahui saat ini aplikasi-aplikasi sudah dapat menampilkan data secara real-time dari server/website atau platform lainnya. Hal tersebut salah satunya karena adanya API yang menghubungkan data ke masing-masing platform tersebut. Pada contoh kali ini saya akan menggunakan sampel data json dari https://jsonplaceholder.typicode.com/users/. Jika dilihat struktur datanya kira-kira seperti di bawah ini. Total data ada 10.

[
  {
    "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"
    }
  },

Tahap Pertama kita akan membuat file halamanJson.dart dalam project kita. Kemudian isi dengan kode di bawah ini.

import 'package:flutter/material.dart';

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

class HalamanJson extends StatefulWidget {
@override
_HalamanJsonState createState() => _HalamanJsonState();
}

class _HalamanJsonState extends State {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Data JSON"),
),
drawer: DrawerApp(),
body: Center(
          child: Text("Data JSON")
),
);
}
}

Selanjutnya kita membutuhkan beberapa package diantaranya sebagai berikut. Tambahkan http dependencies dalam file pubspecs.yaml

dependencies:
flutter:
sdk: flutter

http: ^0.12.0+1

Lalu import dalam file .dart

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'dart:async';

Selanjutnya kita akan menggunakan Future untuk menjalankan http.get. 

List datadariJSON;

Future ambildata() async {
http.Response hasil = await http.get(
Uri.encodeFull("https://jsonplaceholder.typicode.com/users"),
headers: {"Accept": "application/json"});

this.setState(() {
datadariJSON = json.decode(hasil.body);
});
}

Pada contoh Future di atas, sebelumnya kita telah membuat List terlebih dahulu yang bernama datadariJSON yang dimaksudkan akan menampung data yang akan diparsing dari url. Jadi sebelum Future ambildata dijalankan maka List datadariJSON masih bernilai null. setState di sini berfungsi untuk merubah state dari datadariJSON yang tadinya null menjadi berisi data dari hasil parsing. Lalu untuk menjalankan Future ambil data kita menggunakan initState.

@override
void initState() {
this.ambildata();
}

Singkatnya Full Code-nya akan menjadi seperti di bawah ini. Di sini saya menampilkan List datadariJSON menggunakan ListView.builder dimana setiap ListTile nya dapat diubah secara custom sesuai keinginan masing-masing. Untuk melihat contoh Listview custom di sini.

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';

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

class HalamanJson extends StatefulWidget {
@override
_HalamanJsonState createState() => _HalamanJsonState();
}

class _HalamanJsonState extends State {
List datadariJSON;


Future ambildata() async {
http.Response hasil = await http.get(
Uri.encodeFull("https://jsonplaceholder.typicode.com/users"),
headers: {"Accept": "application/json"});

this.setState(() {
datadariJSON = json.decode(hasil.body);
});
}

@override
void initState() {
this.ambildata();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Data JSON"),
),
body: Container(
child: ListView.builder(
itemCount: datadariJSON == null ? 0 : datadariJSON.length,
itemBuilder: (context, i){
return ListTile(
title: Text(datadariJSON[i]['name']),
);
}
),
),
);
}
}

Saat menampilkan data dari List kita seperti menampilkan array pada umumnya dan disesuaikan dengan struktur dari JSON yang tersedia. Contohnya di sini menampilkan name dengan cara datadariJSON[i]['name']. Contoh lain jika ingin menampilkan nama jalan maka kita gunakan cara datadariJSON[i]['address']['street'].


Selamat mencoba :)





Card image cap
[Flutter][27] Form (Bagian 3) Form tipe Radio dengan RadioListTile
27 May 2019 Learn


Card image cap
[Flutter][29] Parsing JSON pada Flutter (Bagian 2) Penggunaan Loading dengan CircularProgressIndicator
01 Jun 2019 Learn