Sebelumnya saya sudah pernah membahas cara menggunakan List View builder untuk menampilkan data list pada aplikasi flutter, di tutorial itu juga, saya sedikit membahas apa perbedaan List View dan List View builder. Silahkan cek tutorialnya di link berikut ini, https://www.fromsunda.eu.org/2022/02/cara-menggunakan-list-view-builder-di.html
Nah, kali ini kita akan mengembangkan ilmu yang sudah kita pelajari sebelumnya dengan menambahkan data api. Pada studi kasus kita kali ini, kita akan membuat aplikasi berita sederhana. Di halaman depan aplikasi terdapat list berita dengan menggunakan List Tile. Dan data beritanya kita dapatkan dari newsapi.org.
Nah, kali ini kita akan mengembangkan ilmu yang sudah kita pelajari sebelumnya dengan menambahkan data api. Pada studi kasus kita kali ini, kita akan membuat aplikasi berita sederhana. Di halaman depan aplikasi terdapat list berita dengan menggunakan List Tile. Dan data beritanya kita dapatkan dari newsapi.org.
Cara Menampilkan Data Api dengan List View Builder pada Flutter
1. Buka newsapi.org, lalu buatlah sebuah akun baru. Setelah akun berhasil dibuat, silahkan pergi ke laman profil/account dan copy apikey yang diberikan.  |
| Mengambil apikey |
2. Buatlah sebuah project flutter baru di visual studio code dengan menekan tombol ctrl + shift + P secara bersamaan. Lalu pilih Flutter: New Project → pilih folder(bebas) → dan beri nama project dengan news_flutter_app.
3. Pertama siapkan package http terlebih dahulu, paket ini berfungsi untuk melakukan request ke server. Silahkan buka file pubspec.yaml lalu paste script di bawah ini di bawah cupertino_icons: ^1.0.2. Lalu tekan ctrl + S untuk menyimpan perubahan.
http: ^0.13.4 4. Buka file main.dart lalu ganti isinya dengan script yang ada di bawah ini. Untuk keterangan script, sudah saya jelaskan di dalam script dan di dalam tabel penjelas yang ada di bawah ini.
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
//_get berfungsi untuk menampung data dari internet nanti
List _get = [];
//paste apikey yang didapatkan dari newsapi.org
var apikey = 'ISI DENGAN API KEY YANG KALIAN DAPATKAN';
@override
void initState() {
// ignore: todo
// TODO: implement initState
super.initState();
_getData();
}
//method untuk merequest/mengambil data dari internet
Future _getData() async {
try {
final response = await http.get(Uri.parse(
"https://newsapi.org/v2/top-headlines?country=id&category=business&apiKey=${apikey}"
)
);
// cek apakah respon berhasil
if (response.statusCode == 200) {
final data = jsonDecode(response.body);
setState(() {
//memasukan data yang di dapat dari internet ke variabel _get
_get = data['articles'];
});
}
} catch (e) {
//tampilkan error di terminal
print(e);
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
//menghilangkan debug label
debugShowCheckedModeBanner: false,
home: Scaffold(
//membuat appbar dengan background putih dan membuat tulisan di tengah
appBar: AppBar(
backgroundColor: Colors.white,
title: Center(
child: Text(
"Apk Berita",
style: TextStyle(
color: Colors.black38
),
),
),
),
body: ListView.builder(
// itemcount adalah total panjang data yang ingin ditampilkan
// _get.length adalah total panjang data dari data berita yang diambil
itemCount: _get.length,
// itembuilder adalah bentuk widget yang akan ditampilkan, wajib menggunakan 2 parameter.
itemBuilder: (context, index){
//padding digunakan untuk memberikan jarak bagian atas listtile agar tidak terlalu mepet
//menggunakan edgeInsets.only untuk membuat jarak hanya pada bagian atas saja
return Padding(
padding: const EdgeInsets.only(
top: 20,
),
//listtile adalah widget yang disediakan flutter berisi 3 properti yang kita pakai
//properti: leading, title, dan subtitle. di dalam setiap properti kalian bebas melakukan customisasi
child: ListTile(
leading: Image.network(
//menampilkan data gamabr
_get[index]['urlToImage'] ?? "https://cdn.pixabay.com/photo/2018/03/17/20/51/white-buildings-3235135__340.jpg",
fit: BoxFit.cover,
width: 100,
),
title: Text(
//menampilkan data judul
_get[index]['title'] ?? "No Title",
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
subtitle: Text(
//menampilkan deskripsi berita
_get[index]['description'] ?? "No Description",
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
);
},
)
),
);
}
}
5. Selanjutnya cari script var apikey = “ISI DENGAN API KEY YANG KALIAN DAPATKAN”. Lalu ganti dengan api key yang kalian dapatkan dari registrasi akun di newsapi.org sebelumnya.
6. Silahkan jalankan project ini, jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.
 |
| Hasil Akhir |
Tabel Penjelas
| # | Syntax/Script | Keterangan |
| 1 | List _get = []; | List adalah tipe data dart sama seperti array. (_) adalah tanda bahwa variabel get adalah private. Variabel ini digunakan untuk menampung data berita dari internet nantinya |
| 2 | try {…} catch(e) { …} | Digunakan untuk mengecek error |
| 3 | void initState() { super.initState(); _getData(); } | Initstate adalah fungsi dari class stateful widget. dipanggil ketika kelas diinisialisasi atau dipanggil untuk pertama kalinya. Untuk pertama kali kita akan memanggil fungsi _getData(). |
| 4 | final response = await http.get(Uri.parse( "https://newsapi.org/v2/top-headlines?country=id&category=business&apiKey=${apikey}" ) ); | Digunakan untuk mengambil data dari api. Dan menyimpan datanya ke dalam variabel response |
| 5 | if (response.statusCode == 200) {…} | 200 adalah response berhasil |
| 6 | final data = jsonDecode(response.body); | JsonDecode digunakan untuk mengubah objek json ke dalam objek dart dan menyimpannya ke dalam variabel data |
| 7 | setState(() { _get = data['articles']; }); | Set state() {} digunakan untuk membuild ulang widget, method atau variabel tertentu. Dalam hal ini variabel _get dibuild ulang dengan mengisi data dari internet. |
Sisa script yang tidak saya jelaskan bisa kalian lihat keterangannya pada artikel tutorial ini https://www.fromsunda.eu.org/2022/02/cara-menggunakan-list-view-builder-di.html
Gimana susah atau mudah guys?. Ok, sekian tutorial flutter dasar kali ini tentang cara menampilkan data api di flutter, semoga bermanfaat. Jika ada yang ingin ditanyakan silahkan tanyakan langsung di kolom komentar di bawah ini atau tanya langsung di fanspage tulisan saya. Sampai jumpa di tutorial flutter keren lainnya.
Posting Komentar