~ We are changing the world with technology. ~

Matt Mullenweg

Aplikasi Qur'an Digital & Play Audio Menggunakan Flutter

Aplikasi Qur'an Digital & Play Audio Menggunakan Flutter

3234 Dilihat

Pendahuluan

Perpindahan media baca dari media cetak ke media digital telah menjadi 'budaya' yang diminati sejak akses teknologi informasi semakin mudah & cepat didapatkan. Al-Qur'an juga telah mengalami peralihan dengan banyaknya umat muslim menggunakan perangkat telepon genggam mereka sebagai media untuk membaca Al-Qur'an.

Berangkat dari kebiasaan tersebut maka artikel kali ini akan mengangkat case membuat aplikasi Qur'an Digital menggunakan Flutter. Adapun sumber data yang akan digunakan adalah data dari Kemenag yang pastinya sudah kredibel dijadikan sumber rujukan untuk mengambil data digital salinan Al-Qur'an.

Tidak hanya untuk membaca Al-Qur'an, tapi aplikasi yang akan kita buat juga dilengkapi dengan fitur untuk memainkan MP3 (Audio) sehingga pengguna dapat mendengarkan bacaan Al-Qur'an langsung dari aplikasi ini.

Baca Juga: Aplikasi Tracking Resi Ekspedisi Flutter

Install Flutter & Package

Sebelum memulai proses development, install Flutter terlebih dahulu dengan command:

flutter create dw-quran

Buka Flutter yang baru saja di-install, kemudian buka file pubspec.yaml dan modifikasi bagian berikut:

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  http: ^0.12.0+2
  provider: ^3.1.0
  audioplayers: ^0.13.2

Penjelasan: 3 package baru tersebut diantaranya: http digunakan untuk request data dari internet, provider untuk state management dan audioplayers untuk memainkan audio dari mp3. Pastikan posisinya sejajar dengan flutter karena posisi sangat berpengaruh.

Ketika fungsi save dijalankan, biasanya secara otomatis akan mengunduh package tersebut. Akan tetapi kita juga bisa melakukannya secara manual menggunakan command:

flutter pub get

Menampilkan List Surah Al-Qur'an

Ada dua screen yang akan digunakan, pertama adalah screen untuk menampilkan list dari seluruh surah yang ada di Al-Qur'an dan screen kedua untuk menampilkan detail atau isi dari surah yang dipilih. Bagian pertama yang akan diselesaikan terlebih dahulu adalah screen untuk menampilkan list surah karena detail surah membutuhkan id surah yang dipilih.

Buka file main.dart dan modifikasi menjadi:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import './screen/quran_list.dart';
import './models/quran_model.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider.value(
          value: QuranData(), //LOAD PROVIDER QURANDATA UNTUK STATE MANAGEMENT LIST SURAH
        ),
        //PROVIDER LAINNYA AKAN DITEMPAT DISINI, DIPISAHKAN DENGAN KOMA
      ],
      child: MaterialApp(
        title: 'DaengwebID',
        theme: ThemeData(
          primarySwatch: Colors.pink,
        ),
        home: QuranList(), //DEFAULTNYA AKAN ME-LOAD SCREEN QURANLIST
        routes: {
          //ROUTING UNTUK DETAIL SURAH
        },
      ),
    );
  }
}

Perhatikan bagian import statement, ada 2 file yang di-import. File tersebut adalah quran_list.dart dan quran_model.dart. Mari kita selesaikan satu persatu, buat file quran_list.dart di dalam folder lib/screen dan tambahkan code berikut:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../models/quran_model.dart';
import '../widget/quran_surah.dart';

class QuranList extends StatefulWidget {
  @override
  _QuranListState createState() => _QuranListState();
}

class _QuranListState extends State<QuranList> {
  ScrollController controller; //VARIABLE controller INI BER-TIPE SCROLLCONTROLLER YANG AKAN DIGUNAKAN UNTUK MENDETEKSI EVENT SCROLL PADA LAYAR
  
  //DEFINISIKAN VARIABLE LAINNYA YANG AKAN DIGUNAKAN UNTUK MENAMPILKAN DATA / PROGRESS LOADING
  bool loadMore = false;
  bool firstLoad = true;

  // HOOKS KETIKA CLASS INI DI-RENDER MAKA AKAN MENJALAN FUNGSI YANG DI-APITNYA
  @override
  void initState() {
    //UNTUK MENJALANKAN FUNGSI PROVIDER DIDALAM INITSTATE, MAKA KITA MEMBUTUHKAN PENUNDAAN MENGGUNAKAN FUTURE.DELAYED, DAN DURASINYA KITA SET KE 0
    Future.delayed(Duration.zero).then((_) {
     //LOAD PROVIDER YANG DITAUTKAN DENGAN QURANDATA (BERASAL DARI QURAN_MODEL.DART)
     // KEMUDIAN DIAKHIR KITA JALANKAN FUNGSI getData() YANG NANTINYA AKAN KITA BUAT
      Provider.of<QuranData>(context, listen: false).getData().then((_) {
        //KEMUDIAN SET firstLoad MENJADI FALSE
        setState(() {
          firstLoad = false;
        });
      });
    });
    super.initState();
    controller = ScrollController()..addListener(_scrollListener); //TAMBAHKAN LISTENER SCROLLING
  }

  //KETIKA CLASS INI DITINGGALKAN
  @override
  void dispose() {
    //MAKA HAPUS LISTENER SCROLLING
    controller.removeListener(_scrollListener);
    super.dispose();
  }

  //ADD LISTENER DAN REMOVE LISTENER MASING-MASING MEMANGGIL METHOD _scrollListener
  //KITA DEFINISIKAN METHOD TERSEBUT
  void _scrollListener() {
    //CEK JIKA POSISI = MAX SCROLL (MENTOK PALING BAWAH)
    if (controller.position.pixels == controller.position.maxScrollExtent) {
      //MAKA SET loadMore JADI TRUE
      setState(() {
        loadMore = true;
      });

      //DAN JALANKAN FUNGSI getData() DARI QURAN_MODEL.DART
      Provider.of<QuranData>(context, listen: false).getData().then((_) {
        //JIKA BERHASIL, MAKA SET loadMore JADI FALSE
        setState(() {
          loadMore = false;
        });
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //BUAT APPBAR UNTUK HEAD APPS
      appBar: AppBar(
        leading: const Icon(Icons.book),
        title: const Text("DaengWeb - Al-Qur'an"),
      ),
      //FLOATING BUTTON KITA GUNAKAN UNTUK MENAMPILKAN PROGRESS LOADING
      floatingActionButton: loadMore ? CircularProgressIndicator() : null,
      body: Container(
        padding: const EdgeInsets.all(5),
        margin: const EdgeInsets.all(5),
        //KETIKA PERTAMA KALI DILOAD MAKA KITA GUNAKAN LOADING DITENGAH LAYAR
        //NAMUN LOAD DATA SELANJUTNYA KITA GUNAKAN LOAD DI POJOK KANAN LAYAR 
        //AGAR TIDAK MENGGANGGU PENGGUNA
        child: firstLoad
            ? Center(
                child: CircularProgressIndicator(),
              )
            //DETEKSI PERUBAHAN DATA MENGGUNAKAN CONSUMER
            //SEHINGGA WIDGET YANG DI-RENDER HANYA WIDGET YANG DIAPIT-NYA
            : Consumer<QuranData>(
                //SETIAP DATANYA KITA BUILD MENGGUNAKAN LISTVIEW AGAR BISA DI SCROLL
                builder: (ctx, data, _) => ListView.builder(
                  controller: controller, //SET CONTROLLER YANG DIBUAT DIAWAL
                  scrollDirection: Axis.vertical,
                  shrinkWrap: true,
                  itemCount: data.items.length, //HITUNG JUMLAH DATA, MAKA LISTVIEW AKAN ME-RNDER SEBANYAK JUMLAH DATA
                  //RENDER DATANYA KE DALAM CUSTOM WIDGET BERNAMA QuranSurah() YANG SELANJUTNYA AKAN KITA BUAT
                  itemBuilder: (ctx, i) => QuranSurah(
                    //KIRIM DATA YANG DIBUTUHKAN
                    data.items[i].id,
                    data.items[i].name,
                    data.items[i].arab,
                    data.items[i].translate,
                    data.items[i].countAyat,
                  ),
                ),
              ),
      ),
    );
  }
}

Penjelasan: setState() digunakan untuk memberitahu bahwa terjadi perubahan data sehingga perlu dilakukan rebuild. Apabila kamu tidak ingin melakukan rebuild widget, maka cukup assign value variable secara langsung tanpa harus diapit oleh setState.

Terdapat kesamaan file yang di-import antara main.dart dan quran_list.dart yakni sama sama meng-import file quran_model.dart, jadi kita akan buat quran_model.dart di dalam folder lib/models dan tambahkan code:

import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

//CLASS INI AKAN MENG-HANDLE FORMAT DATA YANG DIINGINKAN
class Quran {
  //DEFINISIKAN VARIABLENYA BESERTA TIPE DATANYA
  final int id;
  final String name;
  final String arab;
  final String translate;
  final int countAyat;

  //BUAT CONSTRUCTOR DIMANA KETIKA CLASS INI DI-LOAD MAKA WAJIB MENGIRIMKAN DATA YANG DIMINTA
  Quran({
    @required this.id, 
    @required this.name, 
    @required this.arab, 
    @required this.translate, 
    @required this.countAyat
  });
}

//CLASS INI DIGUNAKAN UNTUK STATE MANAGEMENT PROVIDER
class QuranData with ChangeNotifier {
  //DEFINISIKAN VARIABLE _data DENGAN TIPE LIST DAN FORMAT QURAN DIMANA NILAI DEFAULT ADA EMPTY ARRAY
  List<Quran> _data = []; 
  int offset = 0; //DEFINISIKAN VARIABLE offset DENGAN TIPE int DAN VALUE AWAL ADALAH 0

  //KARENA _data ADALAH PRIVATE PROPERTY DITANDAI DENGAN AWAL _
  //MAKA KITA BUAT GETTER AGAR _data BISA DIAKSES DARI LUAR CLASS
  //DAN GETTERNYA DIBERI NAMA items
  List<Quran> get items {
    return [..._data];
  }

  //FUNGSI getData() DIGUNAKAN UNTUK REQUEST LIST DATA SURAH YANG ADA
  Future<void> getData() async {
    try {
      //REQUEST KE SERVER HANYA DIJALANKAN JIKA OFFSET SAMA DENGAN TOTAL DATA YANG ADA
      if (offset == _data.length) {
        //URL TEMPAT KITA MENGAMBIL DATA SURAH, DIMANA OFFSET NILAINYA TERGANTUNG BERAPA BANYAK DATA YANG SUDAH DI-LOAD
        final url = 'https://quran.kemenag.go.id/index.php/api/v1/surat/${offset}/10';
        //MINTA DATA KE API
        final response = await http.get(url);
        //CONVER DATA NYA MENJADI LIST
        final extractData = json.decode(response.body)['data'] as List;
        //JIKA DATANYA KOSONG
        if (extractData == null || extractData.length == 0) {
          return; //MAKA HENTIKAN FUNGSI
        }
        
        final List<Quran> quranData = []; //BUAT VARIABLE SEMENTARA UNTUK MENAMPUNG DATA
        //LOOPING DATA YANG SUDAH DI CONVERT
        extractData.forEach((value) {
          //TAMBAHKAN DATA TERSEBUT KE DALAM VARIABLE SEMENTARANYA
          //DENGAN FORMAT SESUAI DENGAN CLASS Quran()
          quranData.add(Quran(
            id: value['id'],
            name: value['surat_name'],
            arab: value['surat_text'],
            translate: value['surat_terjemahan'],
            countAyat: value['count_ayat']
          ));
        });
      
        offset += quranData.length; //UBAH VALUE OFFSET DENGAN MENAMBAHKAN DATA BARU
        _data.addAll(quranData); //INSERT DATA BARU KE DALAM VARIABLE _data
        notifyListeners(); //INFORMASIKAN JIKA TERJADI PERUBAHAN
      }
    } catch(error) {
      throw error;
    }
  }
}

Model yang bertugas sebagai state management sudah tersedia, 1 file lagi yang luput adalah file quran_surah.dart dimana file ini import oleh class QuranList(). Buat file baru bernama quran_surah.dart di dalam folder lib/widget dan tambahkan code:

import 'package:flutter/material.dart';

class QuranSurah extends StatelessWidget {
  //DEFINISIKAN VARIABLE APA SAJA YANG DIBUTUHKAN UNTUK INFORMASI SURAH
  final int id;
  final String name;
  final String arab;
  final String translate;
  final int countAyat;

  //BUAT CONSTRUCTOR UNTUK MEMINTA DATA KETIKA CLASS INI DI-LOAD
  QuranSurah(this.id, this.name, this.arab, this.translate, this.countAyat);

  //BUAT METHOD UNTUK REDIRECT KE SCREEN BARU
  //FUNGSI INI NANTINYA DIGUNAKAN UNTUK BERPINDAH KE DETAIL MASING-MASING SURAH
  //DIMANA KETIKA SURAH TERSEBUT DITAP MAKA AKAN PINDAH KE SCREEN DETAIL
  void _viewDetail(BuildContext context) {
    Navigator.of(context).pushNamed('/detail', arguments: id); //MENGGUNAKAN NAVIGATOR DAN MENUJU ROUTES /detail DIMANA ROUTE INI BELUM DIDEFINISIKAN
    //ROUTE DIATAS AKAN DIDEFINISIKAN KEMUDIAN. SELAIN ITU KITA MENGIRIMKAN ID SURAH SEBAGAI ARGUMENT YANG NANTINYA DIGUNAKAN OLEH SCREEN YANG BARU UNTUK MENGAMBIL DATA SURAH TERKAIT
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 8,
      margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
      child: ListTile(
        //KETIKA LISTTILE DITAP, MAKA AKAN MENJALANKAN METHOD DIATAS
        onTap: () => _viewDetail(context),
        contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        //MULAI DARI SINI HINGGA CODE DIBAWAH HANYA MENAMPILKAN INFORMASI SURAH 
        //LEADING POSISINYA SEBELAH KIRI, DIMANA KITA GUNAKAN UNTUK MENAMPILKAN NOMOR URUT SURAH
        leading: Container(
          padding: EdgeInsets.only(right: 12),
          decoration: BoxDecoration(
            border: Border(
              right: BorderSide(width: 1, color: Colors.black),
            ),
          ),
          child: CircleAvatar(
            child: Text('$id'),
          ),
        ),
        //TITLE POSISINYA DITENGAH, KITA GUNAKAN UNTUK MENAMPILKAN NAMA SURAH (LENGKAP DENGAN BAHASA ARABNYA)
        title: Text(
          '$name ($arab)',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        //DAN SUBTITLE POSISINYA DIBAWAH TITLE UNTUK MENAMPILKAN INFORMASI TAMBAHAN
        subtitle: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            //PERTAMA ADALAH TERJEMAHAN DARI NAMA SURAH
            Row(
              children: <Widget>[
                Icon(Icons.local_florist, color: Colors.pinkAccent,),
                Expanded(child: Text('Terjemahan: $translate')),
              ],
            ),
            //JUMLAH AYAT DARI SURAH TERSEBUT
            Row(
              children: <Widget>[
                Icon(Icons.local_florist, color: Colors.pinkAccent,),
                Text('Jumlah Ayat: $countAyat'),
              ],
            ),
          ],
        ),
        //POSISINYA PALING KANAN, KITA GUNAKAN UNTUK MENAMPILKAN ICON SAJA
        trailing: Icon(Icons.keyboard_arrow_right, size: 30,),
      ),
    );
  }
}

Sampai pada tahap ini kita sudah berhasil menampilkan list surah dimana fitur yang dimiliki adalah progress loading ketika data sedang di-load dari internet, list view untuk menampilkan data surah, membuat custom widget dimana widget ini re-usable untuk menampilkan informasi surah, menerapkan pagination dengan menampilkan 10 surah per sekali load dan untuk mendeteksi pagination tersebut kita gunakan lazy load atau dengan kata lain mendeteksi scroll screen.

Quran Detail & Play Audio

Masih ingat dengan penjelasan sebelumnya? Jadi ketika ListTile di-tap, maka akan diarahkan ke screen yang akan kita buat pada pembahasan kali ini. Kembali ke main.dart, buka file tersebut dan tambahkan code berikut pada bagian import statement:

import './models/quran_ayat_model.dart';
import './screen/quran_detail.dart';

Masih dengan file yang sama, pada bagian array providers dari MultiProvider(), tambahkan code berikut untuk meng-handle model QuranAyat()

ChangeNotifierProvider.value(
  value: QuranAyat(),
)

Perubahan terakhir dari main.dart adalah pada bagian routes, modifikasi menjadi:

routes: {
  '/detail': (ctx) => QuranDetail(),
},

Kita tinggalkan main.dart, maka tugas selanjutnya adalah membuat class baru bernama quran_detail.dart, tempatkan file tersebut di dalam folder lib/screen dan tambahkan code:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:audioplayers/audioplayers.dart';

import '../models/quran_model.dart'; //IMPORT QURAN MODEL UNTUK MENGAMBIL DATA SURAH
import '../models/quran_ayat_model.dart'; //IMPORT MODEL BARU YANG NANTINYA AKAN KITA BUAT

import '../widget/quran_read.dart'; //CUSTOM WIDGET UNTUK MENAMPILKAN ISI SURAH

class QuranDetail extends StatefulWidget {
  @override
  _QuranDetailState createState() => _QuranDetailState();
}

class _QuranDetailState extends State<QuranDetail> {
  //VARIABLE INI UNTUK MENG-HANDLE BOTTOM NAVIGATION (PREVIOUS = 0, PLAY = 1 DAN NEXT = 2)
  //VALUE DEFAULTNYA KITA SET 2 (NEXT) 
  int bottomIndex = 2; 
  int offset = 0; //OFFSET UNTUK MENANDAI BERAPA DATA YANG SUDAH DI-LOAD
  int totalData = 0; //UNTUK MENYIMPAN INFORMASI ID DATA TERAKHIR YANG DI-LOAD
  int id; //ID SURAH
  bool isPlay = false; //VARIABLE UNTUK PLAY/STOP AUDIO
  AudioPlayer audioPlayer = AudioPlayer(); //VARIABLE YANG AKAN MENG-HANDLE AUDIO

  //METHOD UNTUK MENJALANKAN AUDIO DARI SURAH YANG DIPILIH
  void play() async {
    //JIKA isPlay = false
    if (!isPlay) {
      //MAKA KITA AMBIL URL DARI SURAH TERKAIT MENGGUNAKAN METHOD findMp3Url DENGAN MENGIRIMKAN ID SURAH
      final mp3URL = Provider.of<QuranAyat>(context, listen: false).findMp3Url(id);
      int result = await audioPlayer.play(mp3URL); //PLAY AUDIONYA
      if (result == 1) {
        //JIKA BERHASIL DIPLAY
        setState(() {
          isPlay = true; //MAKA SET VARIABLE NYA JADI TRUE
        });
      }
    } else {
        //JIKA ISPLAY = TRUE MAKA KITA JALANKAN FUNGSI STOP AUDIO
        int result = await audioPlayer.stop();
        if (result == 1) {
          setState(() {
            isPlay = false; //DAN SET isPlay JADI FALSE
          });
        }
    }
  }

  //KETIKA BOTTOM NAVIGATION DI-TAP MAKA AKAN MENJALANKAN FUNGSI INI
  void _changeBottomIndex(index) {
    //DI-CEK INDEX YANG DI-TAP, JIKA VALUE-NYA 1 (TOMBOL PLAY)
    if (index == 1) {
      play(); //MAKA KITA JALANKAN METHOD play()
    }

    //AMBIL DATA TERBARU YANG ADA DI CLASS QuranAyat DENGAN PROPERTY items
    final loadData = Provider.of<QuranAyat>(context, listen: false).items;
    //KEMUDIAN KITA AMBIL NOMOR SURAH DARI DATA YANG TERAKHIR
    totalData = loadData.length > 0 ? loadData[loadData.length - 1].ayatNumber:0;
    
    //JIKA INDEX 0 (PREVIOUS)
    if (index == 0) {
      //OFFSET KITA KURANGI KARENA AKAN KEMBALI KE DATA SEBELUMNYA
      offset -= totalData == offset ? (loadData.length * 2):loadData.length;
    } else if (index == 2) {
        //JIKA INDEX 2 (NEXT), MAKA OFFSET KITA TAMBAH KARENA AKAN KE DATA BERIKUTNYA
        offset += totalData == offset ? (loadData.length * 2):loadData.length;
    }

    setState(() {
      bottomIndex = index; //SET STATE UNTUK MEMBERITAHU BAHWA ADA PERUBAHAN MAKA WIDGET AKAN DIRENDER KEMBALI
    });
  }

  @override
  Widget build(BuildContext context) {
    id = ModalRoute.of(context).settings.arguments as int; //DAPATKAN ARGUMEN YANG DIKIRIMKAN DARI PAGE SEBELUMNYA
    //KEMUDIAN CARI DATA BERDASARKAN ID SURAH YANG DITERIMA
    final data = Provider.of<QuranData>(context, listen: false).findById(id);

    return Scaffold(
        appBar: AppBar(
          title: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text("DaengWeb Al-Qur'an"),
              Text(
                '${data.name} - ${data.arab}',
                style: TextStyle(fontSize: 14, color: Colors.white70),
              ),
            ],
          ),
        ),
        body: Container(
          padding: const EdgeInsets.all(5),
          margin: const EdgeInsets.all(5),
          //PERHATIKAN BAGIAN SEBELUMNYA, KITA TIDAK MENGGUNAKAN FUNGSI getDetail()
          //KARENA FUTURE BUILDER SECARA OTOMATIS AKAN BERJALAN KETIKA SCREEN DI-LOAD
          //DAN KETIKA USER TAP NEXT / PREVIOUS, KITA MENGGUNAKAN SET STATE YANG BERARTI WIDGET DI RE-RENDER, MAKA FUTURE BUILDER AKAN DIJALANKAN KEMBALI
          child: FutureBuilder(
            future:
                Provider.of<QuranAyat>(context, listen: false).getDetail(id, bottomIndex, offset, totalData), //SECARA OTOMATIS FUNGSI INI AKAN DIJALANKAN SETIAP KALI WIDGET BERUBAH UNTUK MENGAMBIL DATA BERDASARKAN ID SURAH, INDEX BOTTOM NAVIGATION DAN OFFSET YANG DI-REQUEST
            builder: (context, snapshot) {
              //KETIKA PROSES REQUEST BERLANGSUNG
              if (snapshot.connectionState == ConnectionState.waiting) {
                //MAKA PROGRESS LOADING DIJALANKAN
                return Center(
                  child: CircularProgressIndicator(),
                );
              } else {
                //JIKA TERJADI ERROR
                if (snapshot.hasError) {
                  //MAKA INFORMASI ERROR DI RENDER
                  return Center(
                    child: Text("Error! Periksa Koneksi Anda"),
                  );
                } else {
                  //SELAIN ITU MAKA KITA RENDER ISI SURAH TERKAIT
                  return Consumer<QuranAyat>(
                    //MENGGUNAKAN CONSUMER UNTUK MENGAMBIL DATA STATE DAN LIST VIEW UNTUK RENDER CONTENT-NYA
                    builder: (ctx, data, _) => ListView.builder(
                      shrinkWrap: true,
                      itemCount: data.items.length, //LIST VIEW AKAN DIJALANKAN BERDASARKAN JUMLAH DATA
                      //LAGI LAGI KITA GUNAKAN CUSTOM WIDGET AGAR CODINGAN DIFILE INI TIDAK PANJANG, CLASS QuranRead() AKAN DIBUAT SELANJUTNYA.
                      itemBuilder: (ctx, i) => QuranRead(
                        data.items[i].ayatNumber,
                        data.items[i].ayatArab,
                        data.items[i].ayatText,
                      ),
                    ),
                  );
                }
              }
            },
          ),
        ),
        //BOTTOM NAVIGATION NYA KITA BUAT DISINI
        bottomNavigationBar: BottomNavigationBar(
          //DIMANA INDEXNYA SESUAI DENGAN BOTTOMINDEX
          currentIndex: bottomIndex,
          //DAN ITEMSNYA ADALAH 3, PREVIOUS, PLAY DAN NEXT
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.arrow_left), title: Text('Previous')),
            BottomNavigationBarItem(
                icon: Icon(isPlay ? Icons.stop:Icons.play_arrow), title: Text('${!isPlay ? "Play":"Stop"}')),
            BottomNavigationBarItem(
                icon: Icon(Icons.arrow_right), title: Text('Next')),
          ],
          //KETIAK DI-TAP MAKA AKAN MENJALANKAN FUNGSI _changeBottomIndex
          onTap: _changeBottomIndex,
        ));
  }
}

Sebelum membuat file selanjutnya, lengkapi terlebih dahulu fungsi dari file yang ada. Jadi dari codingan diatas ada fungsi untuk menjalankan method findById() dimana method ini bertujuan untuk mengambil informasi surah berdasarkan ID-nya. Buka file quran_model.dart dan tambahkan method berikut di dalam class QuranData()

Quran findById(int id) {
  return _data.firstWhere((item) => item.id == id); //GET DATA SURAH BERDASARKAN ID
}

Dua langkah terakhir adalah membuat file quran_read.dart dan quran_ayat_model.dart. Pertama kita buat file quran_ayat_model.dart dan letakkan di dalam folder lib/widget, kemudian tambahkan code:

import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

//CLASS INI SAMA DENGAN CLASS SEBELUMNYA, UNTUK MENG-HANDLE FORMAT DATA YANG DIINGINKAN
class QuranAyatModel {
  final int ayatId;
  final int ayatNumber;
  final int surahId;
  final int juzId;
  final String ayatArab;
  final String ayatText;

  QuranAyatModel({
    @required this.ayatId,
    @required this.ayatNumber,
    @required this.surahId,
    @required this.juzId,
    @required this.ayatArab,
    @required this.ayatText,
  });
}

//CLASS INI UNTUK MENG-HANDLE STATE MANAGEMENT
class QuranAyat with ChangeNotifier {
  List<QuranAyatModel> _data = []; //DATA CONTENT SURAH KITA BUAT BERTIPE LIST DENGAN FORMAT SESUAI DENGAN CLASS QuranAyatModel
  
  //KARENA URL MP3 TIDAK ADA DALAM API, MAKA KITA BUAT MANUAL. DIMANA URUTANNYA KITA SESUAIKAN DENGAN URUTAN SURAH
  //DATA INI MASIH BELUM LENGKAP, SILAHKAN DILENGKAPI
  List _mp3 = [
    'http://ia802609.us.archive.org/13/items/quraninindonesia/001AlFaatihah.mp3',
    'http://ia802609.us.archive.org/13/items/quraninindonesia/002AlBaqarah.mp3',
    'http://ia802609.us.archive.org/13/items/quraninindonesia/003AliImran.mp3',
    'http://ia802609.us.archive.org/13/items/quraninindonesia/004AnNisaa.mp3',
    'http://ia802609.us.archive.org/13/items/quraninindonesia/005AlMaaidah.mp3',
    'http://ia802609.us.archive.org/13/items/quraninindonesia/006AlAnaam.mp3',
    'http://ia802609.us.archive.org/13/items/quraninindonesia/007AlAaraaf.mp3',
    'http://ia802609.us.archive.org/13/items/quraninindonesia/008AlAnfaal.mp3',
    'http://ia802609.us.archive.org/13/items/quraninindonesia/009AtTaubah.mp3',
    'http://ia802609.us.archive.org/13/items/quraninindonesia/010Yunus.mp3',
    'http://ia802609.us.archive.org/13/items/quraninindonesia/011Huud.mp3',
    'http://ia802609.us.archive.org/13/items/quraninindonesia/012Yusuf.mp3',
    'http://ia802609.us.archive.org/13/items/quraninindonesia/013ArRaad.mp3',
    'http://ia802609.us.archive.org/13/items/quraninindonesia/014Ibrahim.mp3',
    'http://ia802609.us.archive.org/13/items/quraninindonesia/015AlHijr.mp3',
    'http://ia802609.us.archive.org/13/items/quraninindonesia/016AnNahl.mp3',
    'http://ia802609.us.archive.org/13/items/quraninindonesia/017AlIsraa.mp3',
    'http://ia802609.us.archive.org/13/items/quraninindonesia/018AlKahfi.mp3',
    'http://ia802609.us.archive.org/13/items/quraninindonesia/019Maryam.mp3',
    'http://ia802609.us.archive.org/13/items/quraninindonesia/020Thaahaa2.mp3'
  ];

  //GETTER AGAR VALUE _data BISA DIAKSES DARI LUAR CLASS
  List<QuranAyatModel> get items {
    return [..._data];
  }

  //MENGAMBIL URL MP3 BERDASARKAN ID SURAH
  String findMp3Url(id) {
    return _mp3[id - 1]; //KARENA ID SURAH DIMULAI DARI 1 SEDANGKAN ARRAY DIMULAI DARI 0, MAKA KITA KURANGI 1 SETIAP ID SURAHNYA
  }

  //METHOD UNTUK MENGAMBIL ISI SURAH BERDASARKAN ID SURAH
  Future<void> getDetail(int id, int navigationBarIndex, int offset, int total) async {
    //PROSES REQUEST HANYA DIJALANKAN JIKA MEMENUHI KONDISI YANG ADA DI DALAM IF
    //HAL INI DILAKUKAN KARENA SETSTATE JUGA BERARTI AKAN MENJALANKAN FUNGSI INI KETIKA TOMBOL PLAY DITAP
    //AKAN TETAP KITA TIDAK INGIN MENJALANKAN FUNGSI INI JIKA BUKAN TOMBOL NEXT/PREVIOUS
    if ((navigationBarIndex == 2 && total == offset) || (navigationBarIndex == 0 && total > offset)) {
      //GET DATA BERDASARKAN ID DAN OFFSET, DIMANA PER SEKALI LOAD KITA AMBIL 10 DATA
      final url = 'https://quran.kemenag.go.id/index.php/api/v1/ayatweb/$id/0/$offset/10';
      final response = await http.get(url);
      final extractData = json.decode(response.body)['data'] as List; //FORMAT DATA BERBENTUK LIST

      if (extractData == null) {
        return;
      }

      final List<QuranAyatModel> ayatData = [];
      //LOOPING DATA
      extractData.forEach((value) {
        //DAN MASUKKAN DATANYA SESUAI FORMAT QuranAyatModel
        ayatData.add(QuranAyatModel(
          ayatId: value['aya_id'],
          ayatNumber: value['aya_number'],
          surahId: value['sura_id'], 
          juzId: value['juz_id'],
          ayatArab: value['aya_text'],
          ayatText: value['translation_aya_text']
        ));
      });

      _data = ayatData; //TAMBAHKAN DATANYA KE DALAM _data
      notifyListeners();
    }
  }
}

Bagian terakhir adalah membuat file quran_read.dart dan tempatkan di dalam folder lib/widget, kemudian tambahkan code:

import 'package:flutter/material.dart';

class QuranRead extends StatelessWidget {
  //DEFINISIKAN VARIABLE DARI INFORMAIS YANG DIBUTUHKAN
  final int ayatNumber;
  final String ayatArab;
  final String ayatText;

  //BUAT CONSTRUCTOR UNTUK MEMINTA DATA
  QuranRead(this.ayatNumber, this.ayatArab, this.ayatText);

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 8,
      child: ListTile(
        contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        leading: CircleAvatar(child: Text('$ayatNumber'),), //POSISI KIRI KITA TAMPILKAN NOMOR AYAT
        //DITENGAH KITA TAMPILKAN TEXT ARABNYA
        title: Text(
          '$ayatArab',
          textAlign: TextAlign.right,
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
        ),
        //DIBAWAH TITLE TAMPILKAN TERJEMAHANNYA
        subtitle: Text('$ayatText'),
      ),
    );
  }
}

Kesimpulan

Studi kasus sederhana ini telah membantu kita dalam belajar Flutter, dimana sepanjang artikel ini kita telah belajar bagimana mengambil data dari internet, menampilkan list ayat dan surah menggunakan ListView, membuat pagination, memainkan audio, membuat progress loading, membuat bottom navigation dan berpindah screen menggunakan navigator.

Adapun dokumentasi code dari artikel ini bisa kamu lihat di Github.

Full Stack Developer & Remote Worker salah satu perusahaan asal Australia. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Mengenal Widget Flutter #2: Container, Stack & Positioned Flutter

Mengenal Widget Flutter #2: Container, S...

Perkenalan lebih lanjut dengan widget Flutter yang banyak digunakan secara umum untuk membuat dan mengatur layout pada aplikasi mobile yang dibangun dengan Flutter. Container, Stack & Positioned akan...

Mengenal Widget Flutter #1: Scaffold & Row-Column Flutter

Mengenal Widget Flutter #1: Scaffold & R...

Perkembangan teknologi menjadi semakin beragam, termasuk bahasa atau framework yang bisa digunakan untuk membuat sebuah aplikasi. Dewasa ini, salah satu framework atau tools yang sedang hits untuk men...

Aplikasi Live Streaming Ceramah Menggunakan Flutter Flutter

Aplikasi Live Streaming Ceramah Mengguna...

Perkembangan teknologi informasi yang begitu pesat, membuat berbagai macam kebiasaan mengalami pergeseran fungsi, salah satunya adalah kebiasaan menonton televisi berpindah ke media lainnya yang menaw...

Komentar