Dari Error Sampai Redesign: Perjalanan Panjang Bikin App Flutter Bulughul Maram

Kalau kamu pernah duduk di depan laptop, kopi udah dingin, dan terminal cuma nampilin merah-merah panjang — kamu pasti tau rasanya. Itulah yang aku alami waktu ngerjain app Flutter Bulughul Maram ini. Mulai dari duplicate enum yang bikin kepala pusing, sampai redesign total UI dengan tema emerald gelap dan ornamen arabesque. Artikel ini adalah catatan jujur dari proses itu — termasuk bagian yang malu-maluin waktu nemu sendiri kesalahannya.

Awal Mula: flutter analyze dan 94 Issues yang Menyambut

Ceritanya simpel. Proyek ini udah jalan beberapa waktu, tapi belum pernah beneran dibersihin. Waktu aku akhirnya jalanin flutter analyze, hasilnya langsung bikin napas sesak:

94 issues. 18 di antaranya error.

Sisanya campuran warning dan info deprecation. Banyak yang dari API Flutter yang udah berubah — hal yang lumrah kalau proyek sempat "didiamkan" beberapa waktu tanpa di-maintain.

Tapi sebelum mikirin yang lain, aku mutusin untuk beresin error dulu satu per satu. Dan error paling bikin frustrasi? Duplikat AppThemeMode.

Root Cause: Satu Enum, Dua Tempat

Setelah ditelusuri, ternyata enum AppThemeMode didefinisikan di dua file sekaligus:

• lib/core/constants/app_theme_mode.dart
• lib/presentation/providers/theme_provider.dart

Mungkin waktu ngoding dulu lupa kalau udah pernah bikin, atau emang niat taruh di dua tempat tapi nggak konsisten. Apapun alasannya, hasilnya: Dart bingung mau pakai yang mana, dan error merembet ke mana-mana.

Solusinya: hapus definisi dari theme_provider.dart, ganti dengan import dari core/constants/. Sederhana di teori, tapi butuh effort karena ada 7 file screen dan widget yang ikut terdampak dan perlu ditambah import yang bener.

Masalah Teknis Kecil yang Lumayan Ngabisin Waktu: sed di macOS

Salah satu hal yang sering dilupain developer yang biasa kerja di Linux: macOS pakai BSD sed, bukan GNU sed. Syntaxnya beda.

Aku sempat nyoba otomasi fix deprecation pakai sed, tapi terus gagal. Flag -i di macOS butuh argumen string kosong (''), dan dia nggak support multiline dengan \a seperti di GNU.

Solusinya? Pakai python3. Lebih verbose, tapi jauh lebih reliable untuk manipulasi file Dart di macOS. Kalau kamu kerja di Mac dan sering butuh text processing script, kebiasaan ini worth banget untuk diadopsi.

Dengan python3, aku fix beberapa deprecation sekaligus:

• withOpacity() diganti ke withValues(alpha:)
• onBackground diganti ke onSurface
• background: di theme diganti ke surface:

Cleanup Terakhir Sebelum Bersih

Setelah semua itu, masih ada beberapa hal yang perlu diberesin:

• 5 file punya unused import — hasil dari script python3 yang nambahin import padahal ternyata nggak dipakai langsung di file itu
• Ada satu default clause di switch AppThemeMode di home_screen.dart yang unreachable karena semua case sudah ditangani eksplisit

Setelah semua itu diberesin, aku jalanin lagi flutter analyze.

0 error. 0 warning.

Perasaannya? Lega banget. Seperti akhirnya bisa napas lega setelah lama nahan.

---

Build APK: Belum Selesai Ternyata

Pikir udah beres? Belum.

Waktu coba build APK dengan flutter build apk --split-per-abi, muncul error baru dari R8 soal missing class dari Play Core library. Untungnya Flutter sendiri udah ngasih file missing_rules.txt yang isinya ProGuard rules yang dibutuhkan. Tinggal copy isinya ke proguard-rules.pro, dan build berjalan lancar.

Untuk final release, aku pakai flutter build appbundle untuk generate AAB — format yang lebih direkomendasikan untuk upload ke Play Store. Berhasil.

---

Babak Kedua: Redesign Total UI

Kalau bagian pertama soal "bersihin rumah", bagian ini soal "renovasi total". Setelah app bisa jalan tanpa error, aku memutuskan untuk redesign UI dari awal. Bukan sekadar ganti warna — tapi rethink keseluruhan visual identity-nya.

Konsep: Emerald, Emas, dan Perkamen

App ini untuk membaca Bulughul Maram — kitab hadits klasik. Jadi visual identity-nya harus nyambung dengan nuansa itu. Aku pilih:

• Warna utama: Emerald gelap + emas + krem perkamen
• Ornamen: Arabesque geometric, berlian pemisah, corner medallion
• Font: Cinzel untuk heading, Lora untuk body teks, Amiri untuk teks Arab
• 3 mode tema: Terang / Gelap / Kitab (perkamen)

Mode "Kitab" ini yang paling unik — latar perkamen dengan efek malam, dirancang untuk pengalaman membaca yang immersive seperti membuka kitab fisik.

Generate File: 22 File Dart dalam Satu Sesi

Total ada 22 file yang dibuat atau dimodifikasi besar-besaran dalam sesi ini. Di antaranya:

Batch 1 — Pondasi:

• app_colors.dart — palet warna baru lengkap
• app_theme.dart — 3 ThemeData untuk tiap mode
• home_screen.dart, detail_screen.dart, kitab_screen.dart — redesign layar utama
• 5 widget baru: candle widget, moon widget, gold dust overlay, arabesque background, shared widgets

Batch 2 — Semua Screen:

• splash_screen.dart — animasi medallion mekar dan ring berputar
• settings_screen.dart — chip pemilih 3 tema
• search_screen.dart, hadits_list_screen.dart, bab_screen.dart
• bookmark_screen.dart, riwayat_screen.dart, catatan_screen.dart, tentang_screen.dart, fokus_screen.dart
• hadits_card.dart — card redesign

---

Audit Bug: 14 Bug Ditemukan Setelah Generate

Setelah semua file selesai digenerate, aku lakukan audit menyeluruh. Hasilnya: 14 bug yang perlu difix sebelum app bisa jalan normal. Beberapa yang paling notable:

1. Missing Alias di app_colors.dart

Beberapa nama warna yang dipakai di screen — seperti cream, darkCard, darkText, mushafBg — ternyata tidak terdefinisi di AppColors. Ini menyebabkan compile error di banyak tempat sekaligus.

2. Crash karena ModalRoute null

Di detail_screen.dart, ada penggunaan ModalRoute.of(context)! dengan null assertion. Kalau screen dipanggil dengan cara tertentu yang tidak melalui named route standar, ini langsung crash.

3. fokus_screen dan catatan_screen: required parameter yang crash

Kedua screen ini punya parameter haditsId yang wajib diisi. Masalahnya, waktu dipanggil via pushNamed, parameter ini tidak terdeliver dengan benar — dan app crash diam-diam.

4. gold_dust_overlay.dart: setState di animation listener

Ini yang agak tricky. Ada setState() yang dipanggil di dalam animation listener, yang menyebabkan frame overflow — UI seperti bergetar atau macet di device tertentu.

5. ThemeProvider Tidak Ada

Yang paling "klasik": file theme_provider.dart yang dipakai di mana-mana ternyata tidak ada di project. Harus dibuat dari nol, termasuk enum AppThemeMode, getter isKitab, dan logic switch tema.

---

Insiden Replace vs Merge di Mac

Ini bagian yang agak menyakitkan untuk diceritain, tapi penting banget buat dicatat.

Waktu copy folder hasil generate ke project yang sudah ada, aku pilih Replace alih-alih Merge. Hasilnya? File-file lain di folder yang sama ikut terhapus. Asset, config, file yang tidak ada hubungannya — hilang begitu saja.

Untungnya proyek sudah pakai Git, jadi bisa recovery dengan git restore .. Selesai dalam hitungan detik.

Pelajaran yang nempel sampai sekarang: kalau copy folder ke project Flutter yang sudah ada di Mac, selalu pilih Merge, bukan Replace. Selalu.

---

Bug Light Mode: Teks Tidak Terbaca

Setelah semua bug teknikal dibereskan, muncul masalah visual yang baru ketahuan dari screenshot: di light mode, teks Arab dan terjemahan tidak terbaca sama sekali.

Penyebabnya ketemu setelah ditelusuri: warna teks di-hardcode dengan nilai hex 0xFFE6D5B8 — warna krem yang bagus di dark mode dan mode Kitab, tapi hampir invisible di background terang. Background card juga hardcoded ke emerald gelap.

Fix-nya: ganti semua warna literal itu ke Theme.of(context).colorScheme.onSurface untuk teks dan colorScheme.surface untuk background. Dengan ini, warna otomatis menyesuaikan tema yang aktif — nggak perlu lagi if-else per mode di setiap widget.

File yang kena fix: home_screen.dart, detail_screen.dart, fokus_screen.dart.

---

Error Terakhir: Android v1 Embedding

Menjelang akhir, ada satu error lagi yang muncul waktu coba flutter run:

Build failed due to use of deleted Android v1 embedding.

Ini terjadi karena file AndroidManifest.xml atau konfigurasi Android di project masih pakai embedding lama (v1) yang sudah dihapus di versi Flutter terbaru. Solusinya: migrate ke Android v2 embedding, yang basically berarti update MainActivity dan pastikan konfigurasi Gradle sudah mengacu ke setup yang baru.

Ini salah satu "hutang teknis" yang sering muncul di project Flutter yang sudah lama tidak di-update dependensinya.

---

Takeaway: Apa yang Aku Pelajari dari Semua Ini

Kalau boleh rangkum dari semua proses panjang ini, ada beberapa hal yang aku bawa pulang:

• Jangan tunda flutter analyze. Makin lama dibiarkan, makin banyak yang numpuk. Jadikan kebiasaan rutin.
• Warna hardcode adalah bom waktu. Selalu pakai Theme.of(context).colorScheme kalau aplikasimu punya lebih dari satu tema.
• Satu sumber kebenaran untuk enum dan konstanta. Kalau AppThemeMode didefinisikan di dua tempat, cepat atau lambat pasti bentrok.
• Di macOS, python3 lebih aman dari sed untuk scripting. Simpan ini sebagai mental note.
• Git bukan opsional. Insiden Replace vs Merge tadi bisa jadi bencana kalau tidak ada version control.
• Audit manual setelah generate kode itu wajib. Mau secanggih apapun alatnya, tetap butuh mata manusia untuk verifikasi.

App Bulughul Maram ini akhirnya jalan — dengan UI yang jauh lebih layak, tiga mode tema yang fungsional, dan nol error di analyzer. Prosesnya panjang dan penuh insiden kecil, tapi justru itu yang bikin belajarnya berasa.

Kalau kamu lagi ngerjain proyek Flutter yang sudah lama "terbengkalai" dan nggak tau harus mulai dari mana: mulai dari flutter analyze. Dari sana, ikuti arahnya.

---

Artikel ini ditulis berdasarkan pengalaman nyata ngerjain proyek Flutter Bulughul Maram — dari debug sampai redesign, dalam satu rangkaian sesi yang lumayan menguras tenaga.