Rivaldi 48

Tutorial Membuat Aplikasi Patungan Qurban Idul Adha dengan Flutter

Halo sobat 48 😁. Bagaimana kabarnya? Semoga selalu dalam keadaan sehat ya. Pada kesempatan kali ini saya akan membagikan sebuah artikel yang membahas tentang Tutorial Membuat Aplikasi Patungan Qurban Idul Adha dengan Flutter.

Aplikasi Patungan Qurban Idul Adha

Saatnya belajar membuat aplikasi patungan qurban (sapi & kambing) menggunakan Flutter dan Sqflite yuk! Dilengkapi fitur multi group, tracking pembayaran, notifikasi lokal, dan UI modern.

Momen Idul Adha identik dengan kegiatan patungan qurban, terutama untuk pembelian sapi yang biasanya dilakukan oleh 7 orang. Namun, sering kali pencatatan dilakukan secara manual, sehingga rawan lupa, salah hitung, atau sulit memantau siapa yang sudah membayar.

Di artikel ini, kita akan membangun aplikasi patungan qurban menggunakan Flutter yang berjalan secara offline dengan database lokal Sqflite. Aplikasi ini tidak hanya mencatat peserta, tetapi juga mampu mengelola banyak grup, menghitung iuran otomatis, hingga memberikan notifikasi pengingat bagi peserta yang belum melakukan pembayaran.

Fitur Utama:

Multi group (lebih dari 1 sapi/kambing
Support qurban sapi (patungan) & kambing (individu)
Perhitungan iuran otomatis
Tracking status pembayaran peserta
Progress bar pembayaran
Status grup (Belum Penuh, Belum Lunas, Selesai)
Notifikasi lokal pengingat pembayaran
Drag & drop urutan peserta
UI modern dengan card dan dashboard style

Aplikasi ini dirancang dengan pendekatan offline-first, sehingga seluruh data disimpan secara lokal menggunakan Sqflite. Hal ini membuat aplikasi tetap ringan, cepat, dan dapat digunakan tanpa koneksi internet. Cocok untuk DKM (Dewan Kemakmuran Masjid) loh!

Pengguna dapat membuat grup qurban baru, menentukan jenis hewan (sapi atau kambing), serta mengatur harga sesuai kondisi di lapangan. Untuk qurban sapi, sistem otomatis membatasi jumlah peserta maksimal 7 orang, sedangkan untuk kambing hanya satu orang.

Selain itu, aplikasi ini juga dilengkapi dengan fitur notifikasi lokal yang dapat mengingatkan siapa saja yang belum membayar, sehingga memudahkan koordinasi antar peserta.

Buat kamu yang ingin langsung mencobanya, silahkan unduh SOURCE CODE DISINI. Tetapi jika kamu ingin mencoba tutorial aplikasi ini dengan versi video, berikut saya berikan Videonya:

Jangan lupa subscribe Channel Youtube saya juga ya Azhar Rivaldi, karena disana ada banyak tutorial-tutorial untuk membuat aplikasi lainnya.

Support Blog Rivaldi 48 agar terus bisa membagikan artikel-artikel yang bermanfaat dengan cara klik link Sociabuzz dibawah ini :
https://sociabuzz.com/azharrvldi_/donate atau https://saweria.co/azharrvldi (bisa pakai GoPay, OVO, DANA, Bank Transfer)

Dengan membangun aplikasi ini, kita tidak hanya belajar tentang penggunaan Sqflite di Flutter, tetapi juga memahami bagaimana membuat aplikasi yang benar-benar relevan dengan kebutuhan sehari-hari.

Jika kamu tertarik mengembangkan lebih lanjut, kamu bisa menambahkan fitur seperti export PDF laporan, sinkronisasi cloud, atau notifikasi otomatis harian.

Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kamu agar ikut membaca Tutorial Membuat Aplikasi Patungan Qurban Idul Adha dengan Flutter ini.

Subscribe juga blog Rivaldi 48 ini agar kamu mendapatkan notifikasi saat Admin update artikel terbaru. Semoga kamu lebih nyaman dan mudah dalam mengakses Blog Rivaldi 48 dimanapun kalian berada. Terima Kasih.

#Flutter #Sqflite #MobileDevelopment #LocalNotification #IdulAdha #QurbanApp

Azhar Rivaldi 4/07/2026

Tutorial Membuat Aplikasi Resep Ramadan dengan Flutter - Lengkap dengan Cooking Timer

Tutorial Flutter

Membuat Aplikasi Resep Ramadan dengan Flutter

Di tutorial ini kita akan membuat sebuah aplikasi resep masakan sederhana menggunakan Flutter yang cocok dijadikan project latihan maupun konten tutorial. Aplikasi ini menampilkan daftar menu untuk buka puasa dan sahur, lengkap dengan bahan, langkah memasak, serta timer otomatis untuk setiap langkah memasak.

Project ini cocok untuk kamu yang ingin belajar bagaimana mengolah data JSON lokal, membuat UI list yang dinamis, serta mengimplementasikan timer berbasis step-by-step cooking di Flutter.

Fitur yang Akan Dibuat:

Beberapa fitur utama dari aplikasi ini antara lain:

Menampilkan daftar resep masakan
Filter kategori menggunakan FilterChip
Cooking step timer untuk setiap langkah
Progress indikator saat proses memasak
Data resep diambil dari file JSON lokal

Detail resep berisi:

daftar bahan
langkah memasak

Dengan fitur ini, aplikasi terasa seperti mini cooking assistant yang membantu pengguna mengikuti proses memasak secara bertahap.

Struktur Data Resep:

Data resep disimpan dalam format JSON sehingga mudah untuk ditambah atau diubah tanpa perlu mengubah kode aplikasi.

Contoh struktur data resep:


{
  "id": 1,
  "title": "Ayam Kecap Ramadan",
  "category": ["buka", "protein"],
  "calories": 520,
  "ingredients": [
    "Ayam 250 gr",
    "Bawang putih 3 siung",
    "Kecap manis 2 sdm"
  ],
  "steps": [
    {
      "text": "Potong ayam sesuai ukuran",
      "duration": 240
    },
    {
      "text": "Tumis bawang putih hingga harum",
      "duration": 180
    }
  ]
}

Setiap langkah memasak memiliki durasi dalam detik, sehingga aplikasi bisa menjalankan timer otomatis dan berpindah ke langkah berikutnya setelah waktu habis.

Fitur Cooking Timer:

Salah satu fitur menarik dari aplikasi ini adalah timer untuk setiap langkah memasak. Ketika pengguna menekan tombol Start, timer akan berjalan sesuai durasi langkah tersebut.

Ketika waktu habis, aplikasi akan:

Menghentikan timer saat ini
Berpindah ke langkah berikutnya
Menampilkan progress proses memasak

Pendekatan ini membuat aplikasi terasa lebih interaktif dibandingkan hanya menampilkan teks resep biasa.

Filter Kategori dengan FilterChip:

Aplikasi juga menyediakan filter kategori seperti:

buka
sahur
sehat
favorit
cepat

Filter ini dibuat menggunakan widget FilterChip sehingga pengguna bisa dengan mudah memilih kategori resep yang ingin ditampilkan.

Mengapa Menggunakan JSON Lokal?

Untuk keperluan tutorial dan demo, data resep disimpan dalam file JSON lokal karena:

lebih sederhana
tidak memerlukan backend
mudah ditambah atau dimodifikasi
cocok untuk project contoh

Pendekatan ini juga sering digunakan untuk mock data saat pengembangan aplikasi.

Dengan project sederhana ini kamu bisa mempelajari beberapa konsep penting dalam Flutter seperti:

parsing JSON

state management sederhana dengan setState
penggunaan Timer
membuat UI dinamis dengan ListView
filter data menggunakan FilterChip

Selain itu, project ini juga bisa dijadikan ide konten tutorial Flutter, terutama untuk tema Ramadan atau aplikasi utilitas sehari-hari.

Jika kamu ingin mengembangkan aplikasi ini lebih lanjut, beberapa fitur yang bisa ditambahkan antara lain:

favorit resep
pencarian resep
notifikasi timer
gambar resep
database online

Buat kamu yang ingin langsung mencobanya, silahkan unduh SOURCE CODE DISINI. Tetapi jika kamu ingin mencoba tutorial aplikasi ini dengan versi video, berikut saya berikan Videonya:

Jangan lupa subscribe Channel Youtube saya juga ya Azhar Rivaldi, karena disana ada banyak tutorial-tutorial untuk membuat aplikasi lainnya.

Support Blog Rivaldi 48 agar terus bisa membagikan artikel-artikel yang bermanfaat dengan cara klik link Sociabuzz dibawah ini :
https://sociabuzz.com/azharrvldi_/donate & https://saweria.co/azharrvldi (bisa pakai GoPay, OVO, DANA, Bank Transfer)

Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kamu agar ikut membaca Tutorial Membuat Aplikasi Resep Ramadan dengan Flutter Lengkap dengan Cooking Timer ini.

#ramadanapp #resepmasakan #ramadan #ramadanrecipes

Azhar Rivaldi 3/10/2026

Tutorial Membuat Avatar Group Overlap (+Counter) di Flutter seperti UI Aplikasi Modern

Tutorial Flutter

Membuat Avatar Group Overlap (+Counter)

Pernah melihat tampilan foto profil yang saling menimpa (overlap) seperti di WhatsApp, GitHub, atau aplikasi sosial lainnya? Tampilan ini dikenal sebagai Avatar Group, di mana beberapa avatar ditampilkan berjejer dengan efek tumpang tindih, dan jika jumlahnya banyak akan muncul indikator seperti +5.

Di artikel ini, kita akan membangun komponen Avatar Group di Flutter yang:

Menampilkan avatar berbentuk lingkaran
Saling overlap secara rapi
Support image (asset & network)
Otomatis menampilkan counter seperti
Reusable dan scalable untuk production app

Kenapa tidak pakai Row atau ListView biasa?

Secara default, Row dan ListView tetap mempertahankan ruang layout tiap item. Jadi walaupun kita geser menggunakan Transform.translate, yang berubah hanya posisi visual, bukan sistem layout-nya. Akibatnya, hanya beberapa avatar yang terlihat menempel, sementara sisanya tampak berjauhan.

Solusi yang lebih tepat adalah menggunakan Stack + Positioned, sehingga kita bisa mengontrol posisi setiap avatar secara presisi dan konsisten.

Komponen kecil seperti ini terlihat sederhana, tapi sangat meningkatkan kualitas visual aplikasi. Bahkan, sering jadi detail yang membuat UI terasa “premium” dibanding tampilan list avatar biasa.

Dan ya… kadang yang bikin UI kelihatan mahal itu bukan animasi ribet, tapi lingkaran kecil yang nempel dengan elegan.

Buat kamu yang ingin langsung mencobanya, silahkan unduh SOURCE CODE DISINI. Tetapi jika kamu ingin mencoba tutorial aplikasi ini dengan versi video, berikut saya berikan Videonya:

Jangan lupa subscribe Channel Youtube saya juga ya Azhar Rivaldi, karena disana ada banyak tutorial-tutorial untuk membuat aplikasi lainnya.

Support Blog Rivaldi 48 agar terus bisa membagikan artikel-artikel yang bermanfaat dengan cara klik link Sociabuzz dibawah ini :
https://sociabuzz.com/azharrvldi_/donate & https://saweria.co/azharrvldi (bisa pakai GoPay, OVO, DANA, Bank Transfer)

Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kamu agar ikut membaca Tutorial Membuat Avatar Group Overlap (+Counter) di Flutter seperti UI Aplikasi Modern ini.

Azhar Rivaldi 2/26/2026

Tutorial Membuat Aplikasi Keuangan dengan Flutter Gemini AI

Tutorial Flutter

Tutorial Membuat Aplikasi Keuangan dengan Flutter Gemini AI

Aplikasi pengelolaan keuangan yang aku kembangkan sudah punya AI-Powered Insight untuk membantu pengguna memahami pola pengeluaran bukan cuma angka, tapi ceritanya.

Dengan integrasi AI, aplikasi bisa:

Merangkum kondisi keuangan pengguna dalam 1–2 kalimat
Memberi analisis singkat berdasarkan data bulanan
Menghasilkan 3 rekomendasi praktis untuk menghemat
Bonus: AI Suggest Category untuk mengisi kategori otomatis saat input transaksi

Apa saja fiturnya?

1. AI Financial Insight

Fitur favorit aplikasi bisa membaca pola pengeluaran kamu dan memberikan:

Ringkasan kondisi keuangan bulan ini
Analisis pola (kategori terbesar, hari paling aktif, hingga perbandingan bulan lalu)
3 rekomendasi penghematan yang langsung bisa dipraktikkan

Semua insight dihasilkan otomatis dan tampil rapi berkat proses cleanMarkdown.

2. AI Chat Assistant

Ketika butuh tanya hal lain seputar keuangan pribadi, budgeting, atau sekadar penasaran “kok jajan kopi tiba-tiba banyak banget?”, pengguna bisa ngobrol langsung dengan AI Assistant bawaan aplikasi.

AI Assistant bisa:

Menjawab pertanyaan umum seputar pengeluaran
Memberi saran berdasarkan konteks
Jadi tempat curhat ringan kalau saldo mendadak tipis

3. AI Suggest Category

Saat menginput transaksi dan bingung pengelompokannya, cukup tekan tombol Suggest Category (AI). Sistem otomatis menganalisis judul dan jumlah, lalu mengisi kategori yang paling relevan.

Hasilnya? Input transaksi jadi lebih cepat dan rapi.

4. Ekspor Data: Excel & CSV

Karena sebagian pengguna suka mengolah datanya sendiri atau menyimpan backup, aplikasi juga menyediakan:

Ekspor Excel (.xlsx)
Ekspor CSV

Keduanya bisa diekspor berdasarkan bulan tertentu, sehingga laporan lebih terfokus dan mudah dibaca.

Fitur ini sangat membantu untuk:

Laporan pribadi
Rekap bulanan
Analisis manual di spreadsheet

Kenapa Fitur Ini Penting?

Karena banyak orang punya data, tapi nggak tahu cara membacanya. Dengan insight otomatis seperti ini, aplikasi bukan cuma jadi “tempat mencatat pengeluaran”, tapi asisten keuangan ringan yang bantu bikin keputusan kecil setiap hari.

Cara Menggunakannya:

Catat pengeluaran seperti biasa.
Gunakan Suggest Category kalau ingin cepat.
Buka halaman Ringkasan Bulanan untuk data statistik.
Tekan Generate Insight untuk mendapatkan analisis AI.
Kalau ingin tanya apa pun? Buka AI Chat Assistant.
Ingin backup/olah manual? Pakai Export CSV/Excel.

Tujuannya sederhana: membantu pengguna bukan cuma mencatat, tapi memahami dan mengontrol pengeluaran mereka.

Mulai dari insight otomatis, chat AI, hingga ekspor data yang semuanya dirancang agar pengelolaan keuangan terasa lebih ringan, modern, dan praktis.

Aplikasi Keuangan ini menggunakan API dari Google Gemini AI. Jadi sebelum mencoba tutorial ini, kamu harus membuat API KEY terlebih dahulu DISINI.

Silakan Login dengan akun Google kamu ya. Untuk dokumentasinya bisa kamu lihat DISINI.

Tutorial Membuat Aplikasi dengan Gemini AI Android Studio

Gambar 1 Gemini API KEY

Gambar 2 Gemini API KEY

Buat kamu yang ingin langsung mencobanya, silahkan unduh SOURCE CODE DISINI. Tetapi jika kamu ingin mencoba tutorial aplikasi ini dengan versi video, berikut saya berikan Videonya:

Jangan lupa subscribe Channel Youtube saya juga ya Azhar Rivaldi, karena disana ada banyak tutorial-tutorial untuk membuat aplikasi lainnya.

Support Blog Rivaldi 48 agar terus bisa membagikan artikel-artikel yang bermanfaat dengan cara klik link Sociabuzz dibawah ini :
https://sociabuzz.com/azharrvldi_/donate & https://saweria.co/azharrvldi (bisa pakai GoPay, OVO, DANA, Bank Transfer)

Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kamu agar ikut membaca Tutorial Membuat Aplikasi Keuangan dengan Flutter Gemini AI ini.

#Flutter #MobileDevelopment #FlutterDev #DartLang #Programming #SoftwareEngineering #DevProject #CodingLife #LearnFlutter #MobileApp #FlutterIndonesia #GeminiAI

Azhar Rivaldi 1/13/2026

Tutorial Membuat Aplikasi Cerita Anak dengan Flutter Gemini AI - AI Story Generator

Tutorial Flutter

Tutorial Membuat Aplikasi Cerita Anak dengan Flutter Gemini AI

Pernah ingin membuat cerita anak yang lucu, singkat, dan penuh imajinasi… tapi ide mendadak hilang entah ke mana? Saya membuat sebuah aplikasi kecil yang bisa membantu: AI Story Generator.

Aplikasi ini memungkinkan orang tua, guru, atau siapa pun untuk membuat cerita anak secara instan hanya dengan sekali tekan. Setiap kali dibuka, aplikasi akan membuatkan cerita baru & lengkap dengan ilustrasi unik bergaya buku dongeng.

Yang seru: karakter, latar, dan tema ceritanya dipilih secara acak, jadi setiap cerita terasa seperti “kejutan kecil” buat anak. Serius, bahkan saya sendiri suka baca hasilnya. 😄

Fitur Utama:

Generate cerita anak otomatis menggunakan Gemini AI
Ilustrasi otomatis lewat image generation
Teks dibacakan dengan Text-to-Speech
Simpan cerita ke history (disimpan offline di perangkat)
Buka kembali cerita kapan saja meski tanpa internet

Aplikasi Cerita Anak ini menggunakan API dari Google Gemini AI. Jadi sebelum mencoba tutorial ini, kamu harus membuat API KEY terlebih dahulu DISINI.

Silakan Login dengan akun Google kamu ya. Untuk dokumentasinya bisa kamu lihat DISINI.

Gambar 1 Gemini API KEY

Gambar 2 Gemini API KEY

Cara Menggunakan:

Buka aplikasi
Tekan tombol “Generate Story”
Aplikasi akan: Membuat cerita baru, Menampilkan ilustrasi, Membacakan ringkasan secara otomatis
Jika suka hasilnya, tekan Save untuk menyimpan
Buka tab History untuk melihat koleksi cerita yang pernah dibuat
Ketuk salah satu untuk melihat detail atau menghapusnya

Buat kamu yang ingin langsung mencobanya, silahkan unduh SOURCE CODE DISINI. Tetapi jika kamu ingin mencoba tutorial aplikasi ini dengan versi video, berikut saya berikan Videonya:

Jangan lupa subscribe Channel Youtube saya juga ya Azhar Rivaldi, karena disana ada banyak tutorial-tutorial untuk membuat aplikasi lainnya.

Support Blog Rivaldi 48 agar terus bisa membagikan artikel-artikel yang bermanfaat dengan cara klik link Sociabuzz dibawah ini :
https://sociabuzz.com/azharrvldi_/donate & https://saweria.co/azharrvldi (bisa pakai GoPay, OVO, DANA, Bank Transfer)

Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kamu agar ikut membaca Tutorial Membuat Aplikasi Cerita Anak dengan Flutter Gemini AI ini.

#Flutter #MobileDevelopment #FlutterDev #DartLang #Programming #SoftwareEngineering #DevProject #CodingLife #LearnFlutter #MobileApp #FlutterIndonesia #GeminiAI

Azhar Rivaldi 12/07/2025

Tutorial Membuat Aplikasi Pinjam Buku Perpustakaan dengan Flutter

Tutorial Flutter

Halo sobat 48😁. Bagaimana kabarnya? Semoga selalu dalam keadaan sehat ya. Pada kesempatan kali ini saya akan membagikan sebuah artikel yang membahas tentang Tutorial Membuat Aplikasi Pinjam Buku Perpustakaan dengan Flutter.

Tutorial Membuat Aplikasi Pinjam Buku Perpustakaan dengan Flutter

Aplikasi peminjaman buku perpustakaan menggunakan Flutter, lengkap dengan:

Manajemen Buku (data real-time dari API Gutendex)
Peminjaman & Pengembalian Buku
Notifikasi otomatis (pengingat H-1 sebelum jatuh tempo)
Riwayat Peminjaman
Auto-clean riwayat setelah 7 hari
Refresh + Shimmer Loading
Offline-friendly dengan SQFLite (untuk data peminjaman)

Tujuan aplikasi ini bukan untuk produksi, tetapi untuk konten edukasi Flutter, demo arsitektur sederhana, dan latihan implementasi fitur yang sering dipakai di aplikasi nyata.

Yang menarik, aplikasi ini mengambil data buku langsung dari API tanpa disimpan ke database, jadi tetap ringan. Namun data peminjaman tersimpan lokal agar tracking berjalan mulus.

Kalau kamu sedang belajar Flutter dan ingin mempelajari integrasi API + database + notifikasi lokal, ini bisa jadi referensi yang mudah diikuti.

Cara Menggunakan Aplikasi:

1. Daftar Buku

Aplikasi akan menampilkan daftar buku dari API Gutendex (dengan pagination dan shimmer loading).
Ketuk salah satu buku untuk melihat detail dan memulai peminjaman.

2. Peminjaman Buku

Isi nama peminjam.
Pilih tanggal pinjam dan estimasi tanggal kembali.
Sistem otomatis:
Mengecek stok berdasarkan peminjaman aktif.
Menjadwalkan notifikasi reminder H-1.
Tekan Konfirmasi Pinjam → data tersimpan di SQLite.

3. Pengembalian Buku

Masuk ke menu Pengembalian.
Aplikasi menampilkan list semua pinjaman yang masih aktif.
Tekan tombol Kembalikan:
Status berubah menjadi returned.
Tanggal pengembalian otomatis dicatat.
Notifikasi yang masih terjadwal dibatalkan.

4. Riwayat Peminjaman

Menampilkan daftar semua transaksi peminjaman.
Riwayat otomatis terhapus setelah 7 hari (auto-clean).

Kenapa Bikin Ini?

Buat konten edukasi Flutter yang sederhana namun fitur-fiturnya “real app”.
Latihan integrasi API + SQFlite + Local Notifications.
Studi kasus clean-up otomatis dan notifikasi yang bisa dibatalkan.

Buat kamu yang ingin langsung mencobanya, silahkan unduh SOURCE CODE DISINI. Tetapi jika kamu ingin mencoba tutorial aplikasi ini dengan versi video, berikut saya berikan Videonya:

Jangan lupa subscribe Channel Youtube saya juga ya Azhar Rivaldi, karena disana ada banyak tutorial-tutorial untuk membuat aplikasi lainnya.

Support Blog Rivaldi 48 agar terus bisa membagikan artikel-artikel yang bermanfaat dengan cara klik link Sociabuzz dibawah ini :
https://sociabuzz.com/azharrvldi_/donate & https://saweria.co/azharrvldi (bisa pakai GoPay, OVO, DANA, Bank Transfer)

Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kamu agar ikut membaca Tutorial Membuat Aplikasi Pinjam Buku Perpustakaan dengan Flutter ini.

Follow Instagram Admin @azhardvls_

#Flutter #MobileDevelopment #FlutterDev #DartLang #Programming #SoftwareEngineering #DevProject #CodingLife #LearnFlutter #MobileApp #FlutterIndonesia

Azhar Rivaldi 11/26/2025

Tutorial Membuat Aplikasi Color Palette dengan Flutter

Tutorial Flutter

Halo sobat 48😁. Bagaimana kabarnya? Semoga selalu dalam keadaan sehat ya. Pada kesempatan kali ini saya akan membagikan sebuah artikel yang membahas tentang Tutorial Membuat Aplikasi Color Palette dengan Flutter.

Tutorial Membuat Aplikasi Color Palette dengan Flutter

Color Palette & Real Color – Satu Aplikasi, Dua Kekuatan Warna.

Tools ini dibuat untuk developer, UI/UX designer, dan siapa pun yang sering bekerja dengan warna. Baik dari layar maupun dari dunia nyata.

Fitur Utama:

1. Color Palette

-Katalog lengkap warna Material (100–900 + Accent).

-Setiap shade menampilkan kode HEX secara otomatis.

-Tampilan list full-width untuk perbandingan shade yang lebih jelas.

2. Real Color Scanner

-Deteksi warna real-time langsung dari kamera.

-Konversi otomatis ke kode HEX.

-Simpan warna favorit ke riwayat.

-Copy HEX hanya dengan sekali tap.

Cara Menggunakan:

1. Color Palette

-Pilih kategori warna.

-Jelajahi shade 100–900 & Accent.

-Copy kode HEX yang dibutuhkan.

2. Real Color Scanner

-Buka menu lewat ikon kamera dipojok kanan atas.

-Arahkan ke objek apa pun.

-Lihat preview warna + HEX.

-Simpan ke riwayat bila perlu.

-Tap warna di preview atau di riwayat untuk menyalin kodenya.

Aplikasi ini ideal untuk developer, UI/UX designer, hingga kreator visual yang ingin mengambil referensi warna secara cepat dari mana pun.

Buat kamu yang ingin langsung mencobanya, silahkan unduh SOURCE CODE DISINI. Tetapi jika kamu ingin mencoba tutorial aplikasi ini dengan versi video, berikut saya berikan Videonya:

Jangan lupa subscribe Channel Youtube saya juga ya Azhar Rivaldi, karena disana ada banyak tutorial-tutorial untuk membuat aplikasi lainnya.

Support Blog Rivaldi 48 agar terus bisa membagikan artikel-artikel yang bermanfaat dengan cara klik link Sociabuzz dibawah ini :
https://sociabuzz.com/azharrvldi_/donate & https://saweria.co/azharrvldi (bisa pakai GoPay, OVO, DANA, Bank Transfer)

Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kamu agar ikut membaca Tutorial Membuat Aplikasi Color Palette dengan Flutter ini.

Follow Instagram Admin @azhardvls_

#Flutter #FlutterDevelopment #MobileDeveloper #DartLang #FlutterIndonesia #AppDevelopment #MobileApp #UIUX #UIDesign #DeveloperTools #ColorPalette #ColorTools #ColorPicker #RealColor #MaterialDesign #DesignTools #ColorReference #HexColor #TechProject #CodingLife #IndieDeveloper #SoftwareEngineering #OpenSourceProject #BuildInPublic #TechCommunity

Azhar Rivaldi 11/24/2025

Tutorial Membuat Aplikasi Subscription Tracker dengan Flutter - Biar Tagihan Nggak Lupa Lagi!

Tutorial Flutter

Halo sobat 48😁. Bagaimana kabarnya? Semoga selalu dalam keadaan sehat ya. Pada kesempatan kali ini saya akan membagikan sebuah artikel yang membahas tentang Tutorial Membuat Aplikasi Subscription Tracker dengan Flutter.

Tutorial Membuat Aplikasi Subscription Tracker dengan Flutter

Pernah kebingungan kapan harus bayar langganan? Entah itu Wi-Fi, listrik, Spotify, Netflix, atau sewa rumah? Aplikasi Subscription Tracker ini aku buat dengan Flutter, untuk membantu mengatur semua tagihan berulang secara otomatis.

Fitur Utama Aplikasi:

1. Kelola Langganan dengan Mudah

Tambahkan berbagai langganan beserta harga, kategori, dan catatan sesuai kebutuhanmu.

2. Pengingat Otomatis (Reminder)

Dapat notifikasi sebelum jatuh tempo yang bisa disesuaikan, misalnya H-3 atau H-7 sebelum tagihan.

3. Auto Repeat Bulanan

Tagihan akan otomatis diperbarui ke bulan berikutnya tanpa perlu buka aplikasi lagi.

4. Tampilan Jatuh Tempo yang Jelas

Kamu bisa langsung lihat daftar semua langganan lengkap dengan info tanggal jatuh tempo dan jumlah hari tersisa.

Teknologi yang digunakan:

• Flutter (cross-platform Android & iOS)

• SQLite (sqflite) untuk penyimpanan lokal

• Dropdown Search (dropdown_search) agar mudah memilih kategori

• Chart (fl_chart) untuk mengetahui pengeluaran berdasarkan kategori

• WorkManager untuk penjadwalan otomatis di background

• Local Notification (flutter_local_notifications) untuk pengingat real-time

Cara Pakainya:

1. Buka aplikasi dan tambahkan langganan baru (nama, harga, tanggal jatuh tempo, reminder, dll).

2. Aktifkan fitur auto repeat kalau tagihannya rutin setiap bulan.

3. Aplikasi akan otomatis menjadwalkan notifikasi sebelum jatuh tempo.

4. Duduk santai, aplikasi yang ingatkan kamu 😝

Perizinan Notifikasi

Daftar Tagihan

Sorting Data

Cari Data

Isi Data

Data yang diisi

Chart Kategori

Daftar Biaya Per Kategori

Daftar Bulanan

Swipe Hapus & Edit

Notifikasi Tagihan

Aku bikin aplikasi ini karena terkadang lupa bayar tagihan bulanan (dan kadang baru sadar kalau sudah pertengahan bulan 😂). Sekarang semua lebih rapi dan otomatis!

Kalau kamu juga sering kelupaan, kira-kira fitur apa lagi yang seru kalau ditambahkan? Coba kamu berikan saran di kolom komentar ya!

Buat kamu yang ingin langsung mencobanya, silahkan unduh SOURCE CODE DISINI. Tetapi jika kamu ingin mencoba tutorial aplikasi ini dengan versi video, berikut saya berikan Videonya:

Jangan lupa subscribe Channel Youtube saya juga ya Azhar Rivaldi, karena disana ada banyak tutorial-tutorial untuk membuat aplikasi lainnya.

Support Blog Rivaldi 48 agar terus bisa membagikan artikel-artikel yang bermanfaat dengan cara klik link Sociabuzz dibawah ini :
https://sociabuzz.com/azharrvldi_/donate & https://saweria.co/azharrvldi (bisa pakai GoPay, OVO, DANA, Bank Transfer)

Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kamu agar ikut membaca Tutorial Membuat Aplikasi Subscription Tracker dengan Flutter ini.

Follow Instagram Admin @azhardvls_

#Flutter #MobileDevelopment #OpenSource #SubscriptionTracker #ProductivityApp

Azhar Rivaldi 11/13/2025

Featured Post

Tutorial Membuat Aplikasi Hitung Kalori dengan Flutter Gemini AI

Tutorial Membuat Aplikasi Patungan Qurban Idul Adha dengan Flutter

Tutorial Membuat Aplikasi Resep Ramadan dengan Flutter - Lengkap dengan Cooking Timer

Tutorial Membuat Avatar Group Overlap (+Counter) di Flutter seperti UI Aplikasi Modern

Tutorial Membuat Aplikasi Keuangan dengan Flutter Gemini AI

Tutorial Membuat Aplikasi Cerita Anak dengan Flutter Gemini AI - AI Story Generator

Tutorial Membuat Aplikasi Pinjam Buku Perpustakaan dengan Flutter

Tutorial Membuat Aplikasi Color Palette dengan Flutter

Tutorial Membuat Aplikasi Subscription Tracker dengan Flutter - Biar Tagihan Nggak Lupa Lagi!