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.
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);
}),
);
}
}
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'];
}
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');
}
}
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.
Komentar 3