Flutter Tampilkan Data Dari API JSON Ke Listview

Pada tulisan-tulisan saya sebelumnya saya sudah memberikan gambaran bagaimana performa Flutter sebagai "native app". Salah satu contoh yang dirasakan adalah ketika kita me-load banyak data kemudian mencoba scrolling, jika kamu pernah mencoba IONIC Framework meload banyak data akan membuat performa scrolling menjadi lambat, hal tersebut tidak berlaku pada Flutter karena Flutter memliki performa seperti native app.

Membuat Project Flutter

Ketikkan perintah dibawah ini pada command prompt

flutter create mynewapp

Buka folder project yang telah dibuat menggunakan Visual Studio Code

Memodifikasi Project Flutter

Sebelum memulai, pertama buat folder bernama "pages" didalam folder lib dan hapus folder test.

Membuat home.dart

Buat file dart bernama home.dart didalam folder pages. Buka file home.dart tersebut kemudian letakkan pointer pada baris pertama tekan tombol CTRL+Space pada keyboard.

Dart stful

Pada pilihan silahkan pilih stful kemudian tekan enter pada keyboard, pastikan kursor masih pada posisi yang sama selanjutnya ketik "HomePage", hasilnya seperti dibawah ini:

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return new Container();
  }
}

Selanjtunya adalah mengimport material design pada home.dart pada baris paling atas

import 'package:flutter/material.dart';

Modifikasi main.dart
Hapus semua data pada main.dart kemudian import home.dart dan arahkan home ke HomePage()

import 'package:flutter/material.dart';
import './pages/home.dart';

void main(){
  runApp(new MaterialApp(
    home: new HomePage(),
  ));
}

Flutter: Mendapatkan Data JSON Dari Api

Data JSON dari API akan diambil melalui HTTP request, jika kamu belum memiliki API kamu dapat mencoba dummy API JsonPlaceholder

Struktur tampilan dummy API Jsonplaceholder yang akan digunakan

[
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
},
{
"userId": 1,
"id": 3,
"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
"body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
},
{
"userId": 1,
"id": 4,
"title": "eum et est occaecati",
"body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
}
]

Menginstall library http
tambahkan data dibawah ini pada file pubspec.yaml

dependencies:
  http: ^0.12.0

jalankan perintah dibawah ini untuk menginstall dependensi
$ flutter packages get

Mengimport library tambahan pada home.dart

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

Buat List data dan fungsi getData() didalam class _HomePageState

List data;

  Future<String> getData() async{
    http.Response response = await http.get(
      Uri.encodeFull("https://jsonplaceholder.typicode.com/posts"),
      headers: {
        "Accept":"application/json"
      }
    );
    setState((){
      data = json.decode(response.body);
    });
    return "Success!";
  }

Ubah widget build menjadi seperti dibawah ini

Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Data from API 2"),
        backgroundColor: Colors.blueAccent,
      ),
      body: new ListView.builder(
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (BuildContext context, int index){
          return new Card(
            child: new Text(data[index]["title"]),
          );
        },
      ),
    );
  }

Tambahkan kode didibawah ini pada class _HomePageState

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

Kode keseluruhan home.dart

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State {

  List data;

  Future<String> getData() async{
    http.Response response = await http.get(
      Uri.encodeFull("https://jsonplaceholder.typicode.com/posts"),
      headers: {
        "Accept":"application/json"
      }
    );
    setState((){
      data = JSON.decode(response.body);
    });
    return "Success!";
  }
  
  @override
  void initState(){
    this.getData();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Data from API 2"),
        backgroundColor: Colors.blueAccent,
      ),
      body: new ListView.builder(
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (BuildContext context, int index){
          return new Card(
            child: new Text(data[index]["title"]),
          );
        },
      ),
    );
  }

}

Menjalankan Project Flutter

Sebelum menjalankan project Flutter, pastikan smartphone anda sudah terhubung ke laptop/PC sebagai developer mode atau gunakan Android Virtual Device (AVD). Jalankan project Flutter dengan cara menekan tombol F5 pada keyboard.

Flutter Tampilkan Data JSON