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.

Belajar Class Di Flutter : Navigation

Navigation

Kita telah bisa membuat satu tampilan screen (layar/page) pada pembelajaran sebelumnya. Namun, pada saat membangun sebuah aplikasi kita akan membuat banyak sekali screen dan kita akan berpindah dari satu screen ke screen lainnya.

Dalam pemrograman Android kita mengenal Intent lalu pada pemrograman website terdapat tag untuk berpindah dari satu page ke page lain.

 Pada Flutter kita akan menggunakan sebuah class bernama Navigator. 

Dengan Navigator ini kita akan berpindah dari satu screen ke screen lainnya. Berikut ini contohnya:

Perlu kita ketahui bahwa konsep navigasi pada Flutter mirip sekali dengan pemrograman Android, yakni bahwa ketika berpindah screen/activity akan menjadi tumpukan (stack). 

Jadi ketika berpindah dari satu screen ke screen lain (push), maka screen pertama akan ditumpuk oleh screen kedua. Kemudian apabila kembali dari screen kedua ke pertama, maka screen kedua akan dihapus (pop).

Kita akan membuat kode seperti contoh di atas. Kita membutuhkan screen kedua yang kodenya seperti berikut:

class SecondScreen extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Kembali'),
        ),
      ),
    );
  }
}

Dan untuk screen pertama kodenya seperti berikut:

class FirstScreen extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: RaisedButton(
          color: Colors.blue,
          textColor: Colors.white,
          child: Text('Pindah Screen'),
        ),
      ),
    );
  }
}

Navigator.push

Untuk berpindah ke screen kedua kita akan menggunakan sebuah method Navigator.push, method tersebut ditulis seperti berikut:

Navigator.push(context, MaterialPageRoute(builder: (context) {
   return WidgetScreen();
}));

Pada kode di atas Navigator.push memiliki dua parameter. Pertama ialah context dan yang kedua Route. Parameter context ini merupakan variabel Context yang ada pada method build. 

Parameter route berguna untuk menentukan tujuan ke mana kita akan berpindah screen. 

Route tersebut kita isikan dengan MaterialPageRoute yang di dalamnya terdapat builder yang nantinya akan diisi dengan tujuan screen-nya. 

Maka untuk melakukan perpindahan screen kita akan membuat event onPressed pada tombol RaisedButton yang ada pada screen pertama:

1. class FirstScreen extends StatelessWidget {
2.   @override
3.   Widget build(BuildContext context) {
4.     return Scaffold(
5.       appBar: AppBar(
6.         title: Text('First Screen'),
7.       ),
8.       body: Center(
9.         child: RaisedButton(
10.           color: Colors.blue,
11.           textColor: Colors.white,
12.           child: Text('Pindah Screen'),
13.           onPressed: () {
14.             Navigator.push(context, MaterialPageRoute(builder: (context) {
15.               return SecondScreen();
16.             }));
17.           },
18.         ),
19.       ),
20.     );
21.   }
22. }

Navigator.pop

Setelah dapat berpindah ke screen lain dan kembali ke screen sebelumnya, maka kita akan belajar menggunakan Navigator.pop. Penulisan Navigator.pop seperti berikut:

Navigator.pop(context)

Pada Navigator.pop kita hanya cukup menambahkan parameter context yang merupakan variabel dari method build.

Untuk kembali dari screen kedua kita dapat menambahkan event onPressed pada RaisedButton yang ada pada screen kedua dan kita masukkan Navigator.pop pada event, seperti berikut:

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Kembali'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Mengirimkan Data Antar Halaman

Seringkali beberapa halaman pada aplikasi perlu saling berinteraksi dengan berbagi dan saling mengirimkan data. Pada Flutter kita memanfaatkan constructor dari sebuah class untuk mengirimkan data antar halaman.

Sebagai contoh kita memiliki pesan yang akan dikirimkan dari First Screen menuju Second Screen.

String message = 'Hello from First Screen!';

Untuk mengirimkan variabel message tersebut ke Second Screen, maka kita akan mengirimkannya sebagai parameter dari constructor kelas Second Screen seperti berikut:

1. class FirstScreen extends StatelessWidget {
2.   String message = 'Hello from First Screen!';
3.  
4.   @override
5.   Widget build(BuildContext context) {
6.     return Scaffold(
7.       appBar: AppBar(
8.         title: Text('First Screen'),
9.       ),
10.       body: Center(
11.         child: RaisedButton(
12.           color: Colors.blue,
13.           textColor: Colors.white,
14.           child: Text('Pindah Screen'),
15.           onPressed: () {
16.             Navigator.push(context, MaterialPageRoute(builder: (context) {
17.               return SecondScreen(message);
18.             }));
19.           },
20.         ),
21.       ),
22.     );
23.   }
24. }

Agar Second Screen bisa menerima data tersebut, maka kita perlu mengubah default constructor-nya dan menambahkan variabel untuk menampung datanya.

class SecondScreen extends StatelessWidget {
  final String message;
 
  SecondScreen(this.message);
}

Kemudian kita dapat menampilkan data yang diterima melalui variabel yang kita buat.

1. class SecondScreen extends StatelessWidget {
2.   final String message;
3.  
4.   SecondScreen(this.message);
5.  
6.   @override
7.   Widget build(BuildContext context) {
8.     return Scaffold(
9.       appBar: AppBar(
10.         title: Text('Second Screen'),
11.       ),
12.       body: Center(
13.         child: Column(
14.           mainAxisSize: MainAxisSize.min,
15.           children: <Widget>[
16.             Text(message),
17.             RaisedButton(
18.               child: Text('Kembali'),
19.               onPressed: () {
20.                 Navigator.pop(context);
21.               },
22.             ),
23.           ],
24.         ),
25.       ),
26.     );
27.   }
28. }

Sehingga tampilan Second Screen akan menampilkan pesan dari First Screen seperti berikut:

Anda dapat memahami Navigation secara mendalam dengan membaca dokumentasi Navigation Cookbook.