Inspirational journeys

Follow the stories of academics and their research expeditions

ListView dalam Flutter

HASBI ALMISKY

Thu, 16 Oct 2025

ListView dalam Flutter Contoh Box Shadow
 Halo sobatINA gimana nih kabarnya hari ini, mimin doain semoga dalam lindungan Tuhan yaa Aaminnn. Nahh kali ini kita akan membahas materi tentang ListView. Apa sihh itu ListView kak?
Nahh simak terus yaa.

ListView adalah widget di Flutter yang digunakan untuk menampilkan daftar item secara berurutan. Widget ini sangat berguna ketika Anda memiliki sejumlah besar data atau item yang ingin ditampilkan dalam satu layar. ListView dapat digunakan untuk membuat daftar vertikal atau horizontal.
Kak aku belum ngertii nihh apa maksudnya? Nahh jadi gini analoginya

Mari kita bayangkan Anda memiliki buku harian elektronik (e-diary) dengan banyak catatan. Setiap catatan mewakili satu item yang ingin Anda tampilkan dalam aplikasi Flutter Anda, misalnya, daftar entri blog. Sekarang, bayangkan bahwa layar perangkat Anda terbatas dan tidak dapat menampung semua catatan sekaligus.

Inilah saatnya ListView masuk. Analoginya adalah seperti membaca catatan-catatan Anda satu per satu, dengan kemampuan untuk menggulir ke atas atau ke bawah untuk melihat catatan-catatan berikutnya atau sebelumnya. Sebagai contoh:
  • Jika Anda hanya dapat melihat beberapa catatan sekaligus, ListView akan memungkinkan Anda untuk menggulir ke bawah untuk melihat catatan berikutnya.
  • Jika Anda memiliki banyak catatan, ListView memungkinkan Anda untuk secara efisien menavigasi melalui daftar tersebut tanpa harus menampilkan semuanya sekaligus.
Dengan analogi ini, ListView dapat dianggap sebagai cara yang efektif untuk mengatur dan menampilkan sejumlah besar data atau item dalam satu layar, memastikan bahwa pengguna dapat melihat dan berinteraksi dengan semuanya tanpa merasa terlalu penuh atau kewalahan. Gimana udah paham kann

Kak aku mau contohnya!! Okk tanpa basa basi kita Gass

                
                    ListView(
  children: [
    Container(
      width: 300,
      height: 110,
      color: Colors.red,
    ),
    Container(
      width: 300,
      height: 110,
      color: Colors.yellow,
    ),
    Container(
      width: 300,
      height: 110,
      color: Colors.green,
    ),
    Container(
      width: 300,
      height: 110,
      color: Colors.blue,
    ),
  ],
)




                
                
            

Dan ini hasilnya
Kode tersebut merupakan implementasi dalam Flutter untuk membuat tampilan berupa daftar (list) dengan menggunakan widget ListView. Dalam ListView, terdapat empat Container yang masing-masing memiliki lebar 300 dan tinggi 110. Setiap Container diisi dengan warna yang berbeda: merah (red), kuning (yellow), hijau (green), dan biru (blue).

Widget Container digunakan untuk membuat kotak atau wadah dengan ukuran dan warna tertentu. Pada kode ini, setiap Container merepresentasikan satu item dalam daftar. Lebar dan tinggi yang ditentukan menentukan seberapa besar setiap item akan ditampilkan.






Kamu juga bisa membuatnya secara horizontal. Gimana caranya kak? Nahh berikut codenya

ListView(
        scrollDirection: Axis.horizontal,
            
                Column(
  children: [
    Container(
      width: 130,
      height: 110,
      color: Colors.red,
    ),
    Container(
      width: 130,
      height: 110,
      color: Colors.yellow,
    ),
    Container(
      width: 130,
      height: 110,
      color: Colors.green,
    ),
    Container(
      width: 130,
      height: 110,
      color: Colors.blue,
    ),
  ],
),



            
            
          

Dan hasilnya seperti ini
scrollDirection: Axis.horizontal: Properti ini menentukan arah guliran (scrolling direction) dari ListView. Dengan mengatur nilainya sebagai Axis.horizontal, daftar item akan ditampilkan secara horizontal.

Container: Seperti sebelumnya, setiap Container mewakili satu item dalam daftar. Masing-masing memiliki lebar 130 dan tinggi 110, dan diisi dengan warna yang berbeda: merah (red), kuning (yellow), hijau (green), dan biru (blue).
Dengan demikian, kode ini akan menghasilkan tampilan daftar item yang dapat digulir secara horizontal, dengan setiap item diatur berdampingan dari kiri ke kanan. Hal ini sangat berguna ketika ingin menampilkan daftar item yang lebarnya lebih besar daripada tingginya, atau jika ingin menciptakan tampilan karusel horizontal.



Nahh jadi ginii deh simplenya, 
ListView dalam Flutter adalah widget yang digunakan untuk menampilkan daftar item dalam suatu tata letak sejajar. Ini memungkinkan penggunaan daftar panjang atau tak terbatas, sehingga cocok untuk menangani daftar item yang bisa di-scroll.
ListView dapat menampilkan widget anak dalam satu arah, baik secara vertikal atau horizontal, tergantung pada parameter scrollDirection yang disetel. Anda dapat memasukkan berbagai jenis widget ke dalam ListView, seperti teks, gambar, atau widget kustom lainnya.
Kelebihan penggunaan ListView adalah bahwa ia memungkinkan efisiensi dalam menangani daftar panjang, karena hanya memuat widget yang terlihat di layar, dan memungkinkan pengguna untuk menggulir ke atas atau ke bawah untuk melihat item yang tidak terlihat.

Nahh mungkin untuk kali cukup sekian, semoga kalian paham ya dengan apa yang mimin SELAMAT BELAJAR!!!



0 Comments

Leave a comment