• Langkah 1 - Edit HomePage()
• Langkah 2 - Uji Coba
• Kesimpulan

Pada seri sebelumnya kita sudah konfigurasi untuk remote service atau bisa di sebut menghubungkan data dengan API Service. Selanjutnya kita akan menampilkan data dari API Service ke dalam UI.

Langkah 1 - Edit HomePage()

Langkah pertama kita buka file home_page.dart, lalu ubah keseluruhan kode menjadi berikut:

import 'package:alquran_flutter/remote_resource.dart';
import 'package:alquran_flutter/surah_model.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final remoteResource = RemoteResource();
  final List<SurahModel> surahList = [];

  @override
  void initState() {
    fetchData();
    super.initState();
  }

  void fetchData() async {
    final result = await remoteResource.fetchQuran();
    result.fold(
      (error) {
        ScaffoldMessenger.of(
          context,
        ).showSnackBar(SnackBar(content: Text('Error: $error')));
      },
      (data) {
        setState(() {
          surahList.addAll(data);
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Center(child: const Text('Al-Qur\'an'))),
      body: ListView.builder(
        itemCount: surahList.length,
        itemBuilder: (context, index) {
          final surah = surahList[index];
          return buildSurahCard(surah);
        },
      ),
    );
  }

  Widget buildSurahCard(SurahModel surah) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
      margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.secondaryContainer,
        boxShadow: [
          BoxShadow(
            color: Colors.blueGrey.withValues(alpha: 0.5),
            spreadRadius: 0.5,
            offset: Offset(0, 0.5), // changes position of shadow
          ),
        ],
        borderRadius: BorderRadius.circular(20),
      ),
      child: InkWell(
        onTap: () {
          // Move to detail page
        },
        child: Row(
          spacing: 8,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Stack(
              alignment: Alignment.center,
              children: [
                SvgPicture.asset(
                  'assets/icons/jewish-star.svg',
                  colorFilter: ColorFilter.mode(
                    Theme.of(context).colorScheme.secondary,
                    BlendMode.srcIn,
                  ),
                  width: 52,
                  height: 52,
                ),
                Center(
                  child: Text(
                    surah.nomor.toString(),
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
              ],
            ),
            Expanded(
              flex: 2,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    surah.namaLatin ?? '',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                  Text(surah.arti ?? ''),
                ],
              ),
            ),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Text(
                    '${surah.nama}',
                    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                  Text('${surah.jumlahAyat} Ayat'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Perubahan kode di atas yang pertama yaitu import beberapa library atau package yang di perlukan.

import 'package:alquran_flutter/remote_resource.dart';
import 'package:alquran_flutter/surah_model.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

Lalu pada kelas _HomePageState() kita inisialisasi dan membuat variabel untuk menampung data surah dengan tipe data List.

class _HomePageState extends State<HomePage> {
  final remoteResource = RemoteResource();
  final List<SurahModel> surahList = [];
......
...
}

Selanjutnya kita membuat fungsi dengan nama fetchData(), fungsi ini digunakan untuk mengambil data dari server, lalu fungsi tersebu kita panggil ketika awal state dimuat pada method initState()

@override
void initState() {
 fetchData();
 super.initState();
}

void fetchData() async {
    final result = await remoteResource.fetchQuran();
    result.fold(
      (error) {
        ScaffoldMessenger.of(
          context,
        ).showSnackBar(SnackBar(content: Text('Error: $error')));
      },
      (data) {
        setState(() {
          surahList.addAll(data);
        });
      },
    );
  }

Pada fungsi fetchData() kita menggunakan async , lalu didalam fungsi tersebut kita membuat variable final dengan nama result menggunakan await karena membutuhkan proses memuat data.

Lalu hasilnya nanti kita buat menggunakan method result.fold, method ini menggunakan menghasilkan dua nilai kembalian jika eror maka menampilkan sebuah snacker, dan jika data sukses termuat maka data tersebut akan di masukkan ke dalam variabel surahList.

Lalu kita membuat metod Widget buildSurahCard untuk membuat tampilan seperti kartu.

Widget buildSurahCard(SurahModel surah) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
      margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.secondaryContainer,
        boxShadow: [
          BoxShadow(
            color: Colors.blueGrey.withValues(alpha: 0.5),
            spreadRadius: 0.5,
            offset: Offset(0, 0.5), // changes position of shadow
          ),
        ],
        borderRadius: BorderRadius.circular(20),
      ),
      child: InkWell(
        onTap: () {
          // Move to detail page
        },
        child: Row(
          spacing: 8,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Stack(
              alignment: Alignment.center,
              children: [
                SvgPicture.asset(
                  'assets/icons/jewish-star.svg',
                  colorFilter: ColorFilter.mode(
                    Theme.of(context).colorScheme.secondary,
                    BlendMode.srcIn,
                  ),
                  width: 52,
                  height: 52,
                ),
                Center(
                  child: Text(
                    surah.nomor.toString(),
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
              ],
            ),
            Expanded(
              flex: 2,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    surah.namaLatin ?? '',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                  Text(surah.arti ?? ''),
                ],
              ),
            ),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Text(
                    '${surah.nama}',
                    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                  Text('${surah.jumlahAyat} Ayat'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

Lalu kita masukkan widget tersebut pada metod build

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Center(child: const Text('Al-Qur\'an'))),
      body: ListView.builder(
        itemCount: surahList.length,
        itemBuilder: (context, index) {
          final surah = surahList[index];
          return buildSurahCard(surah);
        },
      ),
    );
  }

Langkah 2 - Uji Coba

Sekarang kita coba jalankan pada emulator atau device kita. sehingga tampilannya kurang lebih seperti berikut.

Kesimpulan

Pada seri kali ini kita belajar cara menginisialisasi remote service dan menampilkan data ke UI, untuk seri artikel selanjutnya kita akan menampilkan detail surah dan membuat player audio.

Membangun Dashboard dan Aplikasi Android Food Store Dengan Laravel Filament, Flutter dan Payment Gateway