Pendahuluan
Hal penting yang wajib diketahui dalam mobile programming, terkhusus ketika menggunakan Flutter adalah HTTP Request. Sebab, hal ini menjadi kunci sekaligus jembatan untuk berinteraksi dengan backend agar dapat diolah lebih lanjut, termasuk memanipulasi database. Jika kita kembali pada seri sebelumnya yang membahas tentang form & validation, dimana case yang diangkat adalah memuat form register, maka data dari form tersebut akan diteruskan ke backend menggunakan HTTP Request.
Pada kesempatan kali ini, kita akan mengangkat case yang berbeda tanpa melanjutkan case sebelumnya, karena ini merupakan seri basic maka kita tidak akan membahas backend terlebih dahulu untuk membuat API sehingga hanya akan memanfaatkan API yang telah ada. Case yang akan diangkat adalah membuat layout Digital Quran untuk menampilkan semua list surah yang ada didalam Al-Quran menggunakan API dari banghasan.
Baca Juga: Belajar Flutter Basic #4: Form & Validation
Membuat List Data
Tahap pertama, karena ini merupakan case yang baru maka install Flutter terlebih dahulu dengan command:
flutter create daengweb_http
Buka file src/main.dart, hapus semua code yang ada kemudian modifikasi menjadi:
import 'package:flutter/material.dart';
//IMPORT PACKAGE UNTUK HTTP REQUEST DAN ASYNCHRONOUS
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
void main() {
runApp(DigitalQuran());
}
class DigitalQuran extends StatefulWidget {
DigitalQuranState createState() => DigitalQuranState();
}
class DigitalQuranState extends State<DigitalQuran> {
//DEFINE VARIABLE url UNTUK MENAMPUNG END POINT
final String url = 'https://api.banghasan.com/quran/format/json/surat';
List data; //DEFINE VARIABLE data DENGAN TYPE List AGAR DAPAT MENAMPUNG COLLECTION / ARRAY
Future<String> getData() async {
// MEMINTA DATA KE SERVER DENGAN KETENTUAN YANG DI ACCEPT ADALAH JSON
var res = await http.get(Uri.encodeFull(url), headers: { 'accept':'application/json' });
setState(() {
//RESPONSE YANG DIDAPATKAN DARI API TERSEBUT DI DECODE
var content = json.decode(res.body);
//KEMUDIAN DATANYA DISIMPAN KE DALAM VARIABLE data,
//DIMANA SECARA SPESIFIK YANG INGIN KITA AMBIL ADALAH ISI DARI KEY hasil
data = content['hasil'];
});
return 'success!';
}
}
Penjelasan: Terdapat 3 hal yang baru dari code diatas dibandingkan yang telah dipelajari pada seri-seri sebelumnya, yakni: import package http, async dan convert. Melakukan request ke server dan menampung data yang diterima kedalam variable data.
Agar fungsi getData() yang telah dibuat berjalan ketika aplikasi di-load maka tambahkan code berikut di dalam class DigitalQuranState:
...
@override
void initState() {
super.initState();
this.getData(); //PANGGIL FUNGSI YANG TELAH DIBUAT SEBELUMNYA
}
...
Membuat Layout
Sampai pada tahap ini kita telah memiliki list data dari API yang digunakan yakni data surat di dalam Al-Quran yang kemudian akan kita looping menggunakan ListView(), dimana untuk masing-masing object kita tampilkan ke dalam sebuah Card(), tambahkan code berikut didalam class DigitalQuranState:
...
Widget build(context) {
return MaterialApp(
title: 'Digital Quran',
home: Scaffold(
appBar: AppBar(
title: Text('Digital Quran')
),
body: Container(
margin: EdgeInsets.all(10.0), //SET MARGIN DARI CONTAINER
child: ListView.builder( //MEMBUAT LISTVIEW
itemCount: data == null ? 0:data.length, //KETIKA DATANYA KOSONG KITA ISI DENGAN 0 DAN APABILA ADA MAKA KITA COUNT JUMLAH DATA YANG ADA
itemBuilder: (BuildContext context, int index) {
return Container(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min, children: <Widget>[
//ListTile MENGELOMPOKKAN WIDGET MENJADI BEBERAPA BAGIAN
ListTile(
//leading TAMPIL PADA SEBELAH KIRI
// DIMANA VALUE DARI leading ADALAH WIDGET TEXT
// YANG BERISI NOMOR SURAH
leading: Text(data[index]['nomor'], style: TextStyle(fontSize: 30.0),),
//title TAMPIL DITENGAH SETELAH leading
// VALUENYA ADALAH WIDGET TEXT
// YANG BERISI NAMA SURAH
title: Text(data[index]['nama'], style: TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold),),
//trailing TAMPIL PADA SEBELAH KANAN SETELAH title
//VALUE NYA ADALAH IMAGE, KETIKA VALUENYA DARI type ADALAH
// MEKAH MAKA AKAN MENAMPILKAN mekah.jpg
// SELAIN DARI ITU MENAMPILKAN IMAGE madinah.png
trailing: Image.asset(data[index]['type'] == 'mekah' ? 'mekah.jpg':'madinah.png', width: 32.0, height: 32.0,),
//subtitle TAMPIL TEPAT DIBAWAH title
subtitle: Column(children: <Widget>[ //MENGGUNAKAN COLUMN
//DIMANA MASING-MASING COLUMN TERDAPAT ROW
Row(
children: <Widget>[
//MENAMPILKAN TEXT arti
Text('Arti : ', style: TextStyle(fontWeight: FontWeight.bold),),
//MENAMPILKAN TEXT DARI VALUE arti
Text(data[index]['arti'], style: TextStyle(fontStyle: FontStyle.italic, fontSize: 15.0),),
],
),
//ROW SELANJUTNYA MENAMPILKAN JUMLAH AYAT
Row(
children: <Widget>[
Text('Jumlah Ayat : ', style: TextStyle(fontWeight: FontWeight.bold),),
//DARI INDEX ayat
Text(data[index]['ayat'])
],
),
//MENAMPILKAN DIMANA SURAH TERSEBUT DITURUNKAN
Row(
children: <Widget>[
Text('Diturunkan : ', style: TextStyle(fontWeight: FontWeight.bold),),
//DENGAN INDEX type
Text(data[index]['type'])
],
),
],),
),
//TERAKHIR, MEMBUAT BUTTON
ButtonTheme.bar(
child: ButtonBar(
children: <Widget>[
// BUTTON PERTAMA
FlatButton(
//DENGAN TEXT LIHAT DETAIL
child: const Text('LIHAT DETAIL'),
onPressed: () { /* ... */ },
),
//BUTTON KEDUA
FlatButton(
//DENGAN TEXT DENGARKAN
child: const Text('DENGARKAN'),
onPressed: () { /* ... */ },
),
],
),
),
],),
)
);
},
),
)
),
);
}
...
Pada property trailing dari ListTile, terdapat widget untuk me-load gambar dari folder assets. So, buat folder assets pada root directory Flutter, kemudian tambahkan kedua image yang dibutuhkan yakni mekah.jpg dan madinah.png (download disini). Kemudian buka file pubspec.yaml lalu tambahkan code berikut:
flutter:
assets:
- madinah.png
- mekah.jpg
Terakhir, jalankan command: flutter run dan hasil yang akan kita peroleh akan tampak seperti berikut
Sedangkan untuk method post, kamu dapat menggunakan pendekatan berikut:
var url = "http://example.com/whatsit/create";
http.post(url, body: {"name": "doodle", "color": "blue"})
.then((response) {
print("Response status: ${response.statusCode}");
print("Response body: ${response.body}");
});
Baca Juga: Belajar Flutter Basic #3: Membuat Tabs
Kesimpulan
HTTP Request menjadi modal dasar yang dapat dimanfaatkan sesuai dengan kebutuhan guna menunjang kemana arah aplikasi yang sedang kamu develop. Sehingga yang perlu kamu persiapkan hanya sebuah end point API untuk berkomunikasi dengan backend yang kamu miliki.
Ohya untuk dokumentasi code dari artikel ini dapat kamu lihat di Github.
Comments