Buat Movie App menggunakan GridView pada Flutter

GridView

GridView adalah widget yang digunakan untuk menampilkan daftar widget dalam bentuk grid atau kisi. Widget ini memungkinkan tata letak elemen-elemen dalam baris dan kolom yang dapat diatur sesuai kebutuhan.

GridView Builder

adalah sebuah widget dalam Flutter yang digunakan untuk menampilkan daftar item dalam bentuk grid dinamis. Hal ini memungkinkan penggunaan sumber data yang besar atau tak terbatas tanpa harus memuat semua item ke dalam memori secara sekaligus, sehingga memungkinkan penghematan memori dan meningkatkan kinerja aplikasi.

Siapkan Data Movie

siapkan folder untuk menyimpan assets gambar

Tambahkan pada file pubspec.yaml folder yang menyimpan data

Buat variabel listAnime yang berisi daftar anime beserta informasi seperti judul dan nama file gambar.

buat AppBar dengan title Animeku, selanjutnya buat Widget GridView Builde dan atur stylenya banyak yang diinginkan, jarak gridnya, dan panggil list yang menyimpan data pada itemCount.

Tampilkan data gambar dan text yang dibungkus dengan Container.

Hasilnya:

tambahkan Gesturedetector

Gesturedetector adalah widget dalam Flutter yang digunakan untuk mendeteksi berbagai jenis input pengguna seperti ketukan (tap), geser, tarik, tekan lama, dan lainnya.

buat class baru untuk menampilkan detail Movie

tambahkan final dengan tipe String untuk title dan gambar.

tambahkan rating, icon dengan Widget Row dan buat widget Text.

hasilnya :

Subscribe

Related articles

Flutter VS React Native, Mana Yang Lebih Baik untuk Proyek Anda?

Saat membuat aplikasi seluler menjadi lebih populer, bisnis mencari...

Menyederhanakan Flutter ORM

Memahami ORM dan Pentingnya Apa itu ORM? Pemetaan Relasional Objek (ORM)...

Database lokal terbaik untuk Flutter

Data aplikasi web apa pun adalah komponen terpentingnya. Aplikasi...

Flutter Json Serialization

Apa itu JSON ? JSON (JavaScript Object Notation) adalah format...

Flutter REST API

Apa itu Rest API ?REST API adalah antarmuka (interface)...

LEAVE A REPLY

Please enter your comment!
Please enter your name here