Rivaldi 48

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

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 Avatar Group Overlap (+Counter) di Flutter seperti UI Aplikasi Modern.

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.

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.

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

Tutorial Membuat Aplikasi Kuis Online dengan Flutter Gemini AI

Tutorial Flutter

Tutorial Membuat Aplikasi Kuis Online dengan Flutter Gemini AI

Aplikasi Kuis Online ini saya buat sederhana ya. Di menu utama menampilkan kategori kuis. Jika di tekan, maka akan muncul level soal yang bisa kamu pilih.

Kalau sudah memilih level, kamu bisa tekan tombol mulai kuis. Setelah selesai mengerjakan soal, maka akan muncul skor yang kalian dapatkan beserta pembahasannya.

Aplikasi Kuis Online 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

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 Kuis Online dengan Flutter Gemini AI ini.

Follow Instagram Admin @azhardvls_

Azhar Rivaldi 10/29/2025

Tutorial Membuat Aplikasi E-Commerce 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 E-Commerce dengan Flutter menggunakan API DummyJSON.

Tutorial Membuat Aplikasi E-Commerce dengan Flutter

Untuk tampilan aplikasinya, di Menu Utama terdapat kategori produk dan daftar produk. Ada Floating Tab untuk mencari produk dan Tab untuk melihat riwayat pembelian.

Ketika memilih salah satu produk, akan menampilkan detail dari produk tersebut. Seperti nama brand, nama produk, rating produk tersebut, dan harga promo.

Kamu tekan "Add to Cart" untuk memasukkan produk ke keranjang. Di Page Cart, kamu bisa hapus produk yang tidak ingin dibeli dengan cara geser ke kiri. Jika mau membayar, tekan "Checkout".

Di Page Checkout, kamu masukkan terlebih dahulu alamat pengiriman dan catatan. Jika pembayaran sukses, maka produk yang dipesan akan muncul di Page History.

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 E-Commerce dengan Flutter ini.

Follow Instagram Admin @azhardvls_