Menggunakan List View Builder & Get Data Api di Flutter

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar bagaimana cara menampilkan data api dengan menggunakan List view builder pada flutter. Penasaran?, ayo ikuti tutorialnya berikut ini.

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.sahretech.com/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.

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.sahretech.com/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 sahretech. Sampai jumpa di tutorial flutter keren lainnya.