Flutter: Penggunaan Widget ListView

Seperti yang Rani singgung sebelumnya kalau kita bakal membuat list card dalam jumlah cukup banyak sampai melebihi batas tinggi layar device, sampai nabrak gitu ceritanya. Dan jadinya di batas bawah yang kelebihan muncul kotak kuning hitam gitu.

Kita menginginkan agar tampilan bisa di scroll ke bawah saat konten melebihi panjang layar. Cara yang kita gunakan adalah mengganti container dan column pada body dengan ListView. Seperti code untuk body berikut, Rani juga tambahkan nomor urut di text nya agar terlihat icon ke berapa yang sedang tampil.

 body: new ListView(

        children: <Widget>[

          GenerateCard(

            caption: "Food Court 1",

            icon: Icons.local_restaurant,

            iconcolor: Colors.orange,

          ),

          GenerateCard(

            caption: "Airport 2",

            icon: Icons.local_airport,

            iconcolor: Colors.green,

          ),

          GenerateCard(

            caption: "Hospital 3",

            icon: Icons.local_hospital,

            iconcolor: Colors.red,

          ),

          GenerateCard(

            caption: "Food Court 4",

            icon: Icons.local_restaurant,

            iconcolor: Colors.orange,

          ),

          GenerateCard(

            caption: "Airport 6",

            icon: Icons.local_airport,

            iconcolor: Colors.green,

          ),

          GenerateCard(

            caption: "Hospital 7",

            icon: Icons.local_hospital,

            iconcolor: Colors.red,

          ),

          GenerateCard(

            caption: "Airport 8",

            icon: Icons.local_airport,

            iconcolor: Colors.green,

          ),

          GenerateCard(

            caption: "Hospital 9",

            icon: Icons.local_hospital,

            iconcolor: Colors.red,

          )

        ],

      ),

Hasil yang akan kita dapat adalah tampilan dapat di scroll dengan jari.