Flutter Menampilkan Data JSON API Ke ListView

Sobatcoding.com - Tutorial Menampilkan Data JSON API Ke dalam ListView Builder

Pada artikel sebelumnya kita telah belajar cara membuat form login dan logout menggunakan android dengan bahasa flutter, kali ini kita akan mencoba menampilkan data dari API berupa format JSON dan menampilkannya pada List View. Bagaimana caranya? Ikuti langkah berikut.

Membuat Form List View

import 'package:flutter/material.dart';

class PageListView extends StatefulWidget {
  const PageListView({Key? key}) : super(key: key);

  @override
  _PageListViewState createState() => _PageListViewState();
}

class _PageListViewState extends State<PageListView> {
 
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Demo List View"),
      ),
      body: ListView.builder(
          itemCount: listCities.length,
          itemBuilder: (BuildContext context, int index) {
            return bulidListItem(index);
          }),
    );
  }
}

Membuat Data Model

Kita buat sebuah class model bernama Cities.

class Cities {
  int? id;
  String? name;

  Cities({this.id, this.name});
  Cities.fromJson(Map json)
      : id = json['id'],
        name = json['name'];
}

Get Data dari REST API

Untuk mengambil atau mendapatkan data dari API kita gunakan package http dan masukkan kode seperti berikut.

@override
  void initState() {
    getListCities();
    super.initState();
  }

getListCities() async {
    try {
      final response = await http.get(
          Uri.parse("https://api.sobatcoding.com/testing/cities"),
          headers: {
            'Content-Type': 'application/json; charset=UTF-8',
          });

      if (response.statusCode == 200) {
        final dataDecode = jsonDecode(response.body);
        setState(() {
          for (var i = 0; i < dataDecode.length; i++) {
            listCities.add(Cities.fromJson(dataDecode[i]));
          }
        });
      }
    } catch (e) {
      debugPrint('$e');
    }
  }

Menampilkan Data ke List View

Widget bulidListItem(index) {
    var item = listCities[index];
    return Card(
      child: ListTile(
        title:
            Text(item.name.toString(), style: const TextStyle(fontSize: 18.0)),
        trailing: Row(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircleAvatar(
                  radius: 20,
                  backgroundColor: Colors.grey.shade400,
                  child: IconButton(
                      color: Colors.white,
                      onPressed: () {},
                      icon: const Icon(Icons.edit))),
              const SizedBox(width: 5),
              CircleAvatar(
                  radius: 20,
                  backgroundColor: Colors.red,
                  child: IconButton(
                      color: Colors.white,
                      onPressed: () {},
                      icon: const Icon(Icons.delete)))
            ]),
      ),
    );
  }

Hasil dari kode di atas adalah seperti pada gambar berikut

Untuk lebih lengkapnya kalian bisa lihat source code nya di link berikut:

https://github.com/ariebowo/androidflutter/blob/main/lib/views/listview_pages.dart

Sekian tutorial kali ini. Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini.

Semoga bermanfaat.