Flutter

Belajar Flutter Basic #5: HTTP Request

Belajar Flutter Basic #5: HTTP Request

705 Dilihat

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

belajar flutter http request

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.

Backend Developer iTechShark, salah satu perusahaan asal Amerika. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Belajar Flutter Basic #4: Form & Validation Flutter

Belajar Flutter Basic #4: Form & Validat...

Interaksi yang sering kali dilakukan dalam sebuah aplikasi adalah mengisi form. Tak lengkap rasanya jika sebuah form hanyalah sebuah form biasa saja tanpa dilengkapi dengan fitur validation. Maka pada...

Belajar Flutter Basic #3: Membuat Tabs Flutter

Belajar Flutter Basic #3: Membuat Tabs

Seringkali kita temukan pada kebanyakan aplikasi mobile adalah pengelompokan konten yang ditampilkan menggunakan tabs. Sebut saja, Whatsapp membaginya menjadi 4 tabs, yakni: Icon kamera, Chat, Status...

Belajar Flutter Basic #2: Layout Menggunakan Widget Flutter

Belajar Flutter Basic #2: Layout Menggun...

Perlu diketahui sebelumnya, bahwa Flutter hanyalah sebuah tools untuk membuat User Interface (UI) yang dapat di-build kedalam versi Android / iOs atau biasa kita sebut dengan istilah frontend. Artikel...

Komentar