Rivaldi 48

Tutorial Blurred ListView 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 Blurred ListView dengan Flutter.

Tutorial Blurred ListView dengan Flutter

Ingin tampilan aplikasi Flutter kamu terlihat lebih modern dan elegan? Di tutorial ini, kamu akan belajar cara membuat Blurred ListView efek blur pada item list yang memberikan kesan fokus, depth, dan interaksi yang lebih menarik.

Fitur yang diterapkan:

Menggunakan widget BackdropFilter untuk efek blur
Mengatur layering UI agar tetap performa optimal
Mendesain card list yang clean dan aesthetic
Mengkombinasikan efek blur dengan media seperti gambar atau video thumbnail

Dengan pendekatan yang praktis dan mudah dipahami, tutorial ini cocok untuk developer Flutter yang ingin meningkatkan kualitas UI/UX aplikasinya.

Hasil akhirnya? ListView yang bukan cuma berfungsi… tapi juga eye-catching.

Buat kamu yang ingin langsung mencobanya, silahkan 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)

Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kamu agar ikut membaca Tutorial Blurred ListView dengan Flutter.

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.

Follow Instagram Admin @azhardvls_

Azhar Rivaldi 8/03/2026

Tutorial Membuat Aplikasi Belajar Huruf Hijaiyah 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 Belajar Huruf Hijaiyah dengan Flutter.

Membuat Aplikasi Belajar Huruf Hijaiyah dengan Flutter

Huruf Hijaiyah membantu pengguna atau santri mengenal dan memahami setiap huruf Arab dengan tampilan yang jelas, berwarna, dan mudah dipahami. Dilengkapi dengan berbagai mode harakat, proses belajar menjadi lebih bertahap dan sistematis.

Beberapa fitur yang diimplementasikan:

Pengenalan huruf hijaiyah lengkap
Tampilan visual berwarna untuk memudahkan identifikasi
Mode belajar: tanpa harakat, fathah, kasrah, dhammah, hingga tanwin
Cocok untuk pemula maupun anak-anak

Belajar huruf jadi lebih menyenangkan, tidak membosankan, dan mudah diingat.

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)

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

Follow Instagram Admin @azhardvls_

Azhar Rivaldi 7/27/2026

Tutorial Membuat Aplikasi Belajar Tajwid dengan Flutter

Tutorial Flutter

Membuat Aplikasi Belajar Tajwid dengan Flutter

Fitur Utama:

Materi lengkap dan mudah dipahami
Ada audio pelafalan agar tidak salah baca
Penjelasan lengkap setiap hukum tajwid
Ada contoh huruf dan contoh ayat

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:

Part 1:

Part 2:

Part 3:

Part 4:

Part 5:

Part 6:

Part 7:

Part 8:

Part 9:

Part 10:

Part 11:

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)

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

Follow Instagram Admin @azhardvls_

Azhar Rivaldi 7/22/2026

Tutorial Membuat Aplikasi Belajar Iqro dengan Flutter

Tutorial Flutter

Tutorial Membuat Aplikasi Belajar Iqro dengan Flutter

Aplikasi ini dirancang untuk membantu siapa saja belajar membaca Al-Qur’an dari dasar menggunakan metode Iqro 1–6. Dengan tampilan yang sederhana dan fokus pada pengalaman belajar, pengguna dapat mempelajari huruf hijaiyah hingga memahami tajwid secara bertahap.

Beberapa fitur yang diimplementasikan:

Materi lengkap Iqro 1 sampai 6
Lanjutkan bacaan terakhir secara otomatis
Tampilan huruf Arab yang jelas + panduan latin
Navigasi halaman yang mudah dan nyaman

Belajar jadi lebih terarah, tanpa ribet. Tinggal buka, lanjut, dan baca.

Dengan aplikasi ini, kamu bisa mulai dari nol sampai lancar baca Al-Qur’an lewat Iqro 1–6.Ada fitur lanjutan bacaan terakhir juga, jadi nggak perlu lagi mikir, “aku tadi sampai mana ya?” (klasik banget ini 😆)

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)

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

Follow Instagram Admin @azhardvls_

Azhar Rivaldi 7/21/2026

Tutorial Membuat Aplikasi Informasi Gunung dengan Flutter

Tutorial Flutter

Tutorial Membuat Aplikasi Informasi Gunung dengan Flutter

Aplikasi ini akan menampilkan lokasi gunung, daftar gunung berdasarkan lokasi yang dipilih, detail gunung dan peralatan apa saja yang harus dibawa saat kita akan melakukan pendakian. Data aplikasi ini saya buat sendiri. Saya kumpulkan data dari Google, mulai dari gambar gunung sampai info gunung tersebut.

Untuk Source Code bisa kalian unduh DISINI. 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.

Berikut ini tampilan menu aplikasinya:

Menu Utama

Daftar Gunung

Detail Gunung

Daftar Perlengkapan

Detail Perlengkapan

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)

Demikian tutorial yang saya bagikan. Jangan lupa bagikan artikel ini ke teman-teman kamu agar ikut membaca Tutorial Membuat Aplikasi Informasi Gunung dengan Flutter.

Follow Instagram Admin @azhardvls_

Azhar Rivaldi 6/01/2026

Tutorial Membuat Aplikasi Adopsi Hewan dengan Flutter

Tutorial Flutter

Tutorial Membuat Aplikasi Adopsi Hewan dengan Flutter

Di artikel ini, saya membuat sebuah aplikasi Flutter sederhana bertema Adopsi Hewan, yang memanfaatkan API publik dan database lokal. Walaupun terlihat sederhana, aplikasi ini sudah mencakup konsep penting seperti API integration, state management dasar, hingga local persistence menggunakan SQLite.

Untuk API-nya saya menggunakan dua ya. Yang pertama dari https://thecatapi.com/ dan yang kedua dari https://www.thedogapi.com/en. Jadi, untuk semua data tutorial ini berasal dari API tersebut. Sebelum menggunakan API-nya, kamu wajib membuat API KEY terlebih dahulu ya. Dan tentunya gratis.

Fitur Utama:

Beberapa fitur yang berhasil diimplementasikan:

Mengambil data hewan dari API
Menampilkan list dengan gambar & informasi breed
Infinite scroll (pagination)
Shimmer loading untuk UX lebih halus
Menyimpan data adopsi ke SQLite
Toggle Adopt / Un-adopt
Dialog konfirmasi sebelum menghapus data
Flutter Maps
Fitur telepon

Data yang didapat meliputi:

URL gambar
Breed Name
Temperament
Origin
Life span
History
Description

Pendekatan ini memudahkan:

parsing JSON
pengiriman data ke halaman detail
scaling ke fitur yang lebih kompleks

Walaupun ini bukan aplikasi adopsi “real”, project ini cukup untuk menunjukkan bagaimana membangun aplikasi Flutter yang:

terhubung ke API
memiliki interaksi user
menyimpan data secara lokal
dan memberikan pengalaman pengguna yang baik

Berikut ini tampilan menu aplikasinya:

Menu Utama

Menu Detail

Menu Maps

Menu Telepon

Menu Adopsi

Menu Riwayat

Menu Intro

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)

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

Follow Instagram Admin @azhardvls_

Azhar Rivaldi 5/19/2026

Tutorial Membuat Aplikasi Distribusi Qurban 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 Cara Membuat Aplikasi Flutter Distribusi Qurban (Offline) dengan QR Scanner & sqflite.

Membuat Aplikasi Distribusi Qurban dengan Flutter

Mengelola distribusi daging qurban sering kali jadi tantangan, terutama ketika jumlah penerima banyak dan prosesnya masih manual. Untuk menjawab kebutuhan tersebut, saya membangun sebuah aplikasi sederhana menggunakan Flutter yang dapat membantu panitia dalam mendata, membagikan, dan memantau distribusi qurban secara lebih efisien. Bahkan tanpa koneksi internet.

Karena hanya untuk tutorial, aplikasi ini menggunakan database lokal (sqflite). Sehingga seluruh data tersimpan langsung di perangkat. Dengan pendekatan ini, aplikasi tetap dapat digunakan di lapangan yang minim jaringan, seperti area masjid atau lokasi distribusi. Jika ingin dibuat online, bisa banget kok!

Fitur Utama:

Aplikasi ini dilengkapi dengan beberapa fitur utama yang dirancang untuk kebutuhan distribusi:

1. Manajemen Data Penerima

Menambahkan, mengedit, dan menghapus data penerima qurban secara langsung di aplikasi.

2. QR Code untuk Setiap Penerima

Setiap data penerima otomatis memiliki QR Code unik dengan format seperti QURBAN-1, yang digunakan sebagai identitas saat distribusi.

3. Scan QR untuk Validasi Distribusi

Panitia cukup melakukan scan QR untuk menandai bahwa paket telah dibagikan. Sistem akan secara otomatis:

Memvalidasi QR
Mencegah duplikasi pengambilan
Menampilkan notifikasi status (berhasil, sudah diambil, atau tidak valid)

4. Feedback Interaktif

Suara “beep” saat scan berhasil
Getaran saat terjadi error
Memberikan pengalaman penggunaan yang lebih responsif di lapangan.

5. Statistik Distribusi

Menampilkan jumlah total penerima dan status distribusi secara real-time.

6. Tampilan QR & Share

QR Code dapat ditampilkan di halaman detail penerima dan dibagikan dalam bentuk gambar untuk keperluan cetak atau distribusi digital.

7. Auto Cleanup Data

Data yang sudah didistribusikan dapat dihapus otomatis setelah periode tertentu (misalnya 30 hari), sehingga database tetap ringan dan terkelola.

Cara Penggunaan Aplikasi:

Panitia menambahkan data penerima di aplikasi
Sistem menghasilkan QR Code untuk setiap penerima
QR dapat dibagikan atau dicetak sebagai kupon
Saat distribusi, panitia melakukan scan QR
Sistem otomatis memvalidasi dan mencatat distribusi

Dengan alur seperti ini, proses distribusi menjadi lebih cepat, akurat, dan minim kesalahan.

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)

Aplikasi ini dirancang dengan pendekatan sederhana namun praktis untuk kebutuhan nyata di lapangan. Dengan memanfaatkan Flutter dan database lokal, solusi ini dapat digunakan tanpa ketergantungan pada internet, serta mudah dikembangkan lebih lanjut sesuai kebutuhan.

Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kamu agar ikut membaca Cara Membuat Aplikasi Flutter Distribusi Qurban (Offline) dengan QR Scanner & sqflite ini.

Follow Instagram Admin @azhardvls_

#Flutter #Sqflite #MobileDevelopment #IdulAdha #QurbanApp

Azhar Rivaldi 4/28/2026

Tutorial Membuat Aplikasi Patungan Qurban Idul Adha dengan Flutter

Tutorial 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.

Follow Instagram Admin @azhardvls_

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

Azhar Rivaldi 4/07/2026