Just Notes My Knowlegde

Menampilkan data dari API dalam Flutter

1. Install Paket http

Bukalah file pubspec.yaml lalu pada bagian dependencies tambahkan kode berikut ini:

http: ^1.1.0

Lalu simpan dan ketik perintah ini di terminal:

flutter pub get

Keterangan:

Paket http digunakan untuk melalukan permintaan HTTP
Perintah flutter pub get digunakan untuk mendownload dan menginstall paket

2. Import paket http di file helper.php

Masih dalam file helper.php lalu masukkan kode berikut ini dibagian atas:

import ‘package:http/http.dart’ as http;

import ‘dart:convert’;

Keterangan:

Library ‘dart:convert’ kita butuhkan karenan berhubungan dengan json.

3. Membuat data JSON di web

Saya membuat di https://belajar-pemrograman.my.id/data/dataMurid.json dengan isi seperti berikut ini:

[
{“id”:1,”nama”:”Muhammad Hirzi”,”jkel”:”L”,”tempat_lahir”:”Bogor”,”tgl_lahir”:”07-02-2010″} ,
{“id”:2,”nama”:”Muhammad Anis”,”jkel”:”L”, “tempat_lahir”:”Bogor”,”tgl_lahir”:”07-02-208″}
]

4. Membuat Fungsi TampilDataMuridApi

Bukalah file helper.dart lalu masukan kode berikut ini:

Future<List<Map<String, dynamic>>?> tampilDataMuridApi() async {
  final respon = await http.get(
    Uri.parse('https://belajar-pemrograman.my.id/data/dataMurid.json'),
  );
  if (respon.statusCode == 200) {
    List<dynamic> hasil = jsonDecode(respon.body);
    return List<Map<String, dynamic>>.from(hasil);
  } else {
    
    return null;
  }
}

Keterangan:

http.get digunakan untuk mengambil data dan menghasilkan http.response
Uri.parse dalah metode yang digunakan untuk merubah string json menjadi objek uri
jsonDecode(respon.body) -> disini kode ini digunakan untuk merubah string json menjadi List<dynamic>
List<Map<String, dynamic>>.from(hasil) kode ini digunakan untuk mengkonversi tipe data dari List<dynamic> menjadi List<Map<String, dynamic>>

5. Membuat Class TampilMuridApi

Copy file tampil_murid.dart menjadi tampil_murid_api.dart Lalu rubahlah nama clasnya menadi TampilMuridApi seperti berikut ini:

class TampilMuridApi extends StatefulWidget {
  const TampilMuridApi({super.key});

  @override
  State createState() {
    return TampilMuridState();
  }
}

6. Perubahan di file TampilMuridState

Masih dalam file tampil_murid_api.dart lalu rubahlah kode berikut ini:

late Future<List<Map<String, dynamic>>> dataSemuaMurid;

menjadi

late Future<List<Map<String, dynamic>>?> dataSemuaMurid;

Lalu rubahlah semua fungsi tampilDataMurid() menjadi tampilDataMuridApi()

Keterangan:

Tanda tanya disini agar List ini bisa diisi dengan nilai null

7. Penambahan pada Menu Drawer

Bukalah file dashboard.dart lalu tambahkan pada variabel judul string berikut ini:

‘Daftar Murid API’

Lalu pada variabel pages maka tambahkan kode berikut ini:

TampilMuridApi(),

Lalu tambahkan pada objek Drawer kode berikut ini:

ListTile(
              title: Text('Lihat Data Murid API'),
              onTap: () {
                setState(() {
                  _indeks = 4;
                });
                Navigator.pop(context);
              },
            ),

8. Jalankan Aplikasi

Tekan menu Run -> Start Debugging atau shortcut tombol F5