Membuat Carousel Gambar Film Marvel dengan Bottom Navigation




 

🚀 Belajar Flutter di Zapp.run: Membuat Carousel Gambar Film Marvel dengan Bottom Navigation

Halo semuanya! 👋

Di artikel kali ini saya ingin berbagi pengalaman seru saya saat belajar Flutter menggunakan platform Zapp.run. Tujuan saya adalah membuat sebuah halaman galeri film Marvel yang memiliki fitur:

Carousel slider gambar yang bisa digeser (swipe) ke kiri dan kanan

Gambar bisa diklik untuk membuka halaman detail

Bottom Navigation Bar untuk berpindah menu (Home, Favorite, Profile)

Awalnya saya hanya ingin mencoba-coba, tapi ternyata hasilnya lumayan keren dan membuat saya semakin semangat belajar Flutter 💪

🧰 Persiapan Project

Saya menggunakan situs Zapp.run

 untuk membuat project Flutter secara online. Zapp.run sangat membantu karena:

Tidak perlu instalasi Android Studio

Bisa langsung coding di browser

Proses running dan debugging sangat cepat

Setelah membuat project baru, saya menambahkan beberapa gambar poster film Marvel ke folder assets/, seperti:

Spider-Man Homecoming

Captain America

Avengers Assemble

Civil War

Age of Ultron

Black Widow

Infinity War

Endgame

💻 Membuat Halaman Carousel

Berikut adalah tampilan utama yang saya buat di file main.dart:

Bagian atas berisi CarouselSlider yang menampilkan poster film Marvel

Setiap gambar bisa diklik untuk masuk ke halaman detail

Di bagian bawah ada BottomNavigationBar untuk navigasi

Saya menggunakan widget CarouselSlider agar user bisa menggeser gambar secara horizontal dengan efek transisi yang halus.

🎉 Hasil Akhir

Setelah dijalankan, tampilannya terlihat seperti aplikasi galeri mini bertema Marvel. Gambar-gambar bisa digeser, dan ketika salah satu gambar diklik, akan terbuka halaman detail yang menampilkan gambar ukuran penuh.

Saya pribadi cukup bangga karena:

Bisa memahami struktur dasar Flutter (Scaffold, AppBar, Column, Navigator)

Bisa menambahkan library eksternal di pubspec.yaml

Bisa mengatur aset gambar dengan benar

📌 Kesimpulan

Belajar Flutter tidak harus ribet atau menunggu lama install SDK. Dengan Zapp.run, kita bisa langsung fokus ke logika dan desain UI. Membuat carousel slider dan bottom navigation ternyata cukup mudah jika tahu langkah-langkahnya.                       |

Ini adalah langkah awal saya mengenal Flutter, dan saya sangat merekomendasikan cara ini bagi kalian yang baru ingin belajar.

Semoga pengalaman saya ini bisa menginspirasi kalian untuk mulai membuat project Flutter sendiri. 💙

Selamat mencoba dan selamat berkarya! ⚡

Berikut Hasil dari Project Saya

https://zz13206p7z133.zapp.page/#/







Comments

Post a Comment

Popular posts from this blog

Kelompok Flutter

 Belajar Flutter: Membuat Halaman Data Kelompok Belajar Anggota Kelompok:  M.Rizky Firmansyah Desta Adila Kusuma Rianto Fitra Anzani Halo teman-teman! 👋 Beberapa waktu lalu saya sedang belajar Dart & Flutter dan mencoba membuat sebuah project sederhana. Tujuannya adalah menampilkan data kelompok belajar di dalam 1 halaman aplikasi. Project ini sangat cocok untuk pemula yang ingin berlatih layout, menampilkan data, dan membuat popup dialog di Flutter. Konsep Halaman yang Dibuat Struktur halaman yang saya rancang sebagai berikut: Bagian atas → Nama kelompok. Di bawahnya → Foto kelompok secara keseluruhan. Selanjutnya → Daftar anggota (berisi foto, nama, nomor absen, dan alamat). Di bagian bawah → Tombol yang bila ditekan akan memunculkan popup dialog berisi rincian anggota kelompok: Nama lengkap Nama kelompok Nomor absen Alamat rumah Kode Program Lengkap (main.dart) Berikut kode lengkap yang saya tulis di main.dart menggunakan zapp.run. Foto-foto anggota disimpan di folder ...
Read more

M.Rizky firmansyah design UI/UX

Image
  Perjalanan Belajarku di Dunia Pemrograman Mobile: Saatnya Fokus ke UI/UX! Halo semuanya! Di postingan kali ini, aku ingin sedikit berbagi tentang perjalanan belajarku dalam mempelajari pemrograman mobile . Setelah beberapa waktu bergelut dengan konsep dasar pemrograman, akhirnya aku sampai di tahap yang menurutku sangat seru dan menantang: UI/UX (User Interface dan User Experience) . Kenapa UI/UX Penting? Sebelumnya, aku sempat berpikir kalau yang paling penting dalam membuat aplikasi adalah logika program dan fitur-fitur canggihnya. Tapi ternyata, secanggih apa pun aplikasi yang kita buat, kalau tampilannya membingungkan atau sulit digunakan, pengguna pasti enggan memakainya. Nah, di sinilah pentingnya UI/UX. UI berfokus pada bagaimana tampilan aplikasi — warna, layout, icon, tombol, dll. Sedangkan UX lebih kepada bagaimana pengalaman pengguna saat menggunakan aplikasi tersebut — apakah mudah? nyaman? intuitif? Apa yang Sedang Aku Pelajari? Saat ini, aku sedang belajar ...
Read more