Flutter: Membuat Banyak Widget (Card) dengan Parsing Data

Kita sudah belajar membuat layout aplikasi dengan menggunakan Card Widget. Tapi buat temen-temen coder yang mungkin terbiasa menggunakan function saat coding php, VB.NET atau C# atau bahkan menggunakan object oriented programming rasanya gatel gimana gitu. Kita buat banyak card di setting satu-satu walau bisa copy paste tapi klo bisa buat semacam fungsi kayaknya lebih sreg.

Nah di flutter/Dart kita bisa menggunakan parsing data. Jadi kayak manggil function gitu tapi nanti dia mengembalikan nilai berupa widget.

Rani buat class StatelessWidget seperti ini.

class GenerateCard extends StatelessWidget {

  GenerateCard(

      {required this.icon, required this.caption, required this.iconcolor});

  final IconData icon;

  final String caption;

  final Color iconcolor;

  @override

  Widget build(BuildContext context) {

    return Container(

      child: new Card(

        child: new Column(

          children: [

            new Icon(icon, size: 60.0, color: iconcolor),

            new Text(

              caption,

              style: new TextStyle(fontSize: 20),

            ),

          ],

        ),

      ),

    );

  }

}

Di atas @override adalah code, code untuk mengatur parameter. Parameter di sini di deklarasikan dengan "final". Kita menggunakan 3 parameter yang digunakan untuk mengatur jenis icon yang ditampilkan, tulisan icon, dan warna icon.

  final IconData icon;

  final String caption;

  final Color iconcolor;

Dan di atas nya ada "cara memanggil" yang nanti akan digunakan, nama dengan parameter yang harus dituliskan.

Langsung saja kita ganti list card icon sebelumnya dan membuat list card dengan cara parsing data di bagian body PageHello.

body: new Container(

          child: new Column(

            crossAxisAlignment: CrossAxisAlignment.stretch,

            children: <Widget>[

              GenerateCard(

                caption: "Food Court",

                icon: Icons.local_restaurant,

                iconcolor: Colors.orange,

              ),

              GenerateCard(

                caption: "Airport",

                icon: Icons.local_airport,

                iconcolor: Colors.green,

              ),

              GenerateCard(

                caption: "Hospital",

                icon: Icons.local_hospital,

                iconcolor: Colors.red,

              )

            ],

          ),

        )

Hasilnya:

Di artikel selanjutnya Rani bakalan nambahin list card nya sampai mentok dan melebihi ukuran tinggi smartphone. Apa yang akan terjadi?