Flutter

Membuat ListView di Flutter

Halo semua. Di tulisan kali ini, kita akan membahas tentang ListView di Flutter. Apa itu ListView? ListView adalah scrolling widget yang sering...

Ikhwan Written by Ikhwan · 2 min read >

Halo semua. Di tulisan kali ini, kita akan membahas tentang ListView di Flutter. Apa itu ListView?

ListView adalah scrolling widget yang sering digunakan. ListView menampilkan data secara berurutan sesuai dengan arah scroll yang ditentukan. Berikut contoh ListView:

Contoh ListView
Contoh ListView

Selanjutnya yuk ngoding 😀


1. Buat sebuah class untuk data kita

class UserModel {
  int id;
  String codeName;
  String name;
  String major;

  UserModel(this.id, this.codeName, this.name, this.major);

}

Kita membuat sebuah class simpel. Sesuaikan data yang dibutuhkan dengan class yang akan anda buat.

2. Buat sebuah widget untuk digunakan sebagai child dari ListView

Kita akan membuat sebuah widget simpel yang sesuai dengan screenshot sebelumnya. Sebuah widget dengan satu avatar dan dua text

class ItemUser extends StatelessWidget {
  final int index;
  final UserModel data;

  ItemUser(this.index, this.data);

  @override
    Widget build(BuildContext context) {
      return Container(
        margin: EdgeInsets.only(top: 24, left: 16, right: 16),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            CircleAvatar(
              radius: 24,
              backgroundColor: Colors.lightBlue,
              child: Text(
                data.codeName,
                style: TextStyle(color: Colors.white),
              ),
            ),
            Expanded(
                child: Container(
              margin: EdgeInsets.only(left: 12),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    data.name,
                    style: TextStyle(fontSize: 16, 
                           fontWeight: FontWeight.w600),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 2),
                    child: Text(data.major),
                  ),
                ],
              ),
            )),
          ],
        ),
      );
    }

}
  • Container Widget adalah sebuah widget yang sering digunakan untuk membungkus widget lainnya ( Klo mimin sih gitu ). Jadi di container kita bisa ngasih margin, padding, decoration, ukuran dan berbagai hal lainnya.
  • Row Widget adalah widget yang digunakan untuk menampilkan list childnya secara horizontal. Ini sama dengan Linear layour dengan direction horizontal di Android Native.
  • Column Widget adalah widget yang hampir sama dengan row widget. Bedanya column widget menampilkan list secara vertical
  • Circle Avatar Widget adalah widget dengan background lingkaran.
  • Text Widget adalah widget untuk menampilkan text. Disini kita juga bisa mengatur stylenya seperti warna, font, ukuran.
  • Expended Widget adalah widget yang akan memakai semua space yang tersedia untuk childnya. Widget ini harus menjadi child dari widget column atau row.

3. Buat list data

Kita telah memiliki UserModel (poin 1), jadi yuk buat data dummynya.

List<UserModel> data = [
  UserModel(1, "IK", "Ikhwan Koto", "Sistem Informasi"),
  UserModel(2, "PA", "Pake Arrayid", "Fisika"),
  UserModel(3, "RK", "Ryan Kimo", "Olah Raga"),
  UserModel(4, "AM", "Arif Mahran", "Biologi"),
  UserModel(5, "NH", "Nurrahman Hado", "Sistem Komputer"),
  UserModel(6, "AN", "Ade Nuri", "Psikologi"),
  UserModel(7, "FC", "Fitriani Chairi", "Ilmu Komputer"),
  UserModel(8, "EA", "Elsa Aprilio", "Teknik Mesin"),
  UserModel(9, "PC", "Putri Coti", "Teknik Industri"),
  UserModel(10, "SE", "Saputra Enriko", "Geografi"),
];

4. Membuat ListView widget dengan widget yang telah kita buat sebelumnya (poin 2) sebagai child.

ListView.builder(
    padding: EdgeInsets.only(bottom: 24),
    itemCount: data.length,
    itemBuilder: (BuildContext context, int index) {
      return InkWell(
        child: ItemUser(index, data[index]),
        onTap: (){
            // Do something
        },
      );
    })
  • Kita menggunakan ListView.Builder untuk membuat ListView
  • Padding digunakan untuk memberikan space tambahan di bawah list terakhir
  • ItemCount untuk menentukan jumlah data yang akan kita munculkan di list
  • ItemBuilder untuk menentukan widget/layout mana yang akan digunakan di ListView. Kita menggunakan widget yang kita buat di step kedua dan menambahkan Inkwell Widget untuk memberikan aksi ketika user memilih salah satu data di list.

#Extra

Kita juga bisa membuat satu widget tapi memiliki aksi yang berbeda ketika diklik. Perbarui item widget seperti di bawah ini:

import 'package:explore_widget/widget/listView/userModel.dart';
import 'package:flutter/material.dart';
class ItemUser extends StatelessWidget {

  final int index;
  final UserModel data;
  final void Function(UserModel) onClick;

  ItemUser(this.index, this.data, this.onClick);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 24, left: 16, right: 16),
      child: InkWell(
        child: .... ,
        onTap: () {
          onClick(data);
        },
      ),
    );
  }

}

dan kita bisa memanggil widget seperti ini:

ListView.builder(
    padding: EdgeInsets.only(bottom: 24),
    itemCount: data.length,
    itemBuilder: (BuildContext context, int index) {
      return ItemUser(index, data[index], (dataModel) {// Do something});
    })

Project sample? tentu ada dong, silahkan akses di link berikut ya

https://github.com/IkhwanSI13/Explore_Widget

Ada postingan menarik lainnya juga loh 😀

Sekian, terimakasih, dan sampai jumpa 😀

Cara untuk Migrasi ke Flutter 2

Ikhwan in Flutter
  ·   2 min read

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *