Belajar Widget ListView di Flutter

ListView

Pada Codelab kedua kita telah menggunakan dan menyinggung sedikit tentang widget ListView. Widget ini digunakan untuk menampilkan beberapa item dalam bentuk baris atau kolom dan bisa di-scroll.

Cara penggunaan ListView ini mirip dengan Column atau Row di mana Anda memasukkan widget yang ingin disusun sebagai children dari ListView.

1. class ScrollingScreen extends StatelessWidget {
2.  
3.   @override
4.   Widget build(BuildContext context) {
5.     return Scaffold(
6.       body: ListView(
7.         children: <Widget>[
8.           Container(
9.             height: 250,
10.             decoration: BoxDecoration(
11.               color: Colors.grey,
12.               border: Border.all(color: Colors.black),
13.             ),
14.             child: Center(
15.               child: Text(
16.                 '1',
17.                 style: TextStyle(fontSize: 50),
18.               ),
19.             ),
20.           ),
21.           Container(
22.             height: 250,
23.             decoration: BoxDecoration(
24.               color: Colors.grey,
25.               border: Border.all(color: Colors.black),
26.             ),
27.             child: Center(
28.               child: Text(
29.                 '2',
30.                 style: TextStyle(fontSize: 50),
31.               ),
32.             ),
33.           ),
34.           Container(
35.             height: 250,
36.             decoration: BoxDecoration(
37.               color: Colors.grey,
38.               border: Border.all(color: Colors.black),
39.             ),
40.             child: Center(
41.               child: Text(
42.                 '3',
43.                 style: TextStyle(fontSize: 50),
44.               ),
45.             ),
46.           ),
47.           Container(
48.             height: 250,
49.             decoration: BoxDecoration(
50.               color: Colors.grey,
51.               border: Border.all(color: Colors.black),
52.             ),
53.             child: Center(
54.               child: Text(
55.                 '4',
56.                 style: TextStyle(fontSize: 50),
57.               ),
58.             ),
59.           ),
60.         ],
61.       ),
62.     );
63.   }
64. }

Ketika dijalankan, aplikasi akan menjadi seperti berikut:

Menampilkan Item Secara Dinamis

Selain memasukkan widget satu per satu ke dalam children dari ListView, Anda juga dapat menampilkan list secara dinamis. Ini sangat berguna ketika Anda memiliki banyak item dengan jumlah yang tidak menentu.

Misalnya kita ingin menampilkan daftar angka dari 1 sampai 10.

List<int> numberList = <int>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Caranya, masukkan variabel atau list Anda sebagai children lalu panggil fungsi map(). Fungsi map ini berguna untuk memetakan atau mengubah setiap item di dalam list menjadi objek yang kita inginkan. Fungsi map ini membutuhkan satu buah parameter berupa fungsi atau lambda.

class ScrollingScreen extends StatelessWidget {
  final List<int> numberList = <int>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: numberList.map((number) {});
      ),
    );
  }
}

Karena parameter children ini membutuhkan nilai berupa list widget, maka kita perlu mengembalikan setiap item dari numberList menjadi widget yang akan ditampilkan. Ubah fungsi lambda Anda menjadi seperti berikut:

1. class ScrollingScreen extends StatelessWidget {
2.   final List<int> numberList = <int>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
3.  
4.   @override
5.   Widget build(BuildContext context) {
6.     return Scaffold(
7.       body: ListView(
8.         children: numberList.map((number) {
9.           return Container(
10.             height: 250,
11.             decoration: BoxDecoration(
12.               color: Colors.grey,
13.               border: Border.all(color: Colors.black),
14.             ),
15.             child: Center(
16.               child: Text(
17.                 '$number', // Ditampilkan sesuai item
18.                 style: TextStyle(fontSize: 50),
19.               ),
20.             ),
21.           );
22.         }).toList(),
23.       ),
24.     );
25.   }
26. }

Perhatikan di akhir kita perlu mengembalikan fungsi map menjadi objek List lagi dengan fungsi .toList(). Lakukan hot reload pada aplikasi Anda untuk melihat hasil perubahan.

Menggunakan List.generate

Cara ini mirip dengan seperti sebelumnya, hanya saja ini langsung menggunakan sebuah List. 

Caranya, isi children dengan List.generate lalu isi parameter pertama dengan panjang dari list yang Anda miliki. 

Lalu isi parameter kedua dengan fungsi berparameter int yang me-return sebuah widget yang Anda inginkan seperti berikut:

1. ListView(
2.   children: List<Widget>.generate(
3.     numberList.length,
4.     (int index) {
5.       return Container(
6.         height: 250,
7.         decoration: BoxDecoration(
8.           color: Colors.grey,
9.           border: Border.all(color: Colors.black),
10.         ),
11.         child: Center(
12.           child: Text(
13.             '${numberList[index]},
14.             style: TextStyle(fontSize: 50),
15.           ),
16.         ),
17.       );
18.     },
19.   ),
20. )

Untuk mempelajari fitur ListView selengkapnya dapat Anda baca pada tautan dokumentasi ListView Class.