Baca Tutorial sebelumnya : LATIHAN FLUTTER WEEK#2 : CARD WIDGET

Tambahkan dibawah page1.dart

class customCard extends StatelessWidget{
  
  customCard({
    this.icon,
    this.teks,
    this.warnaIcon,
  });
  
  final IconData icon;
  final String teks;
  final Color warnaIcon;
  
  @override
  Widget build(BuildContext context) {
    
  }
  
}

Pindahkan Widget Card pada page1.dart ke customcard

class customCard extends StatelessWidget{

  customCard({
    this.icon,
    this.teks,
    this.warnaIcon,
  });

  final IconData icon;
  final String teks;
  final Color warnaIcon;

  @override
  Widget build(BuildContext context) {
    return new Container(
      padding: new EdgeInsets.all(5.0),
      child: new Card(
        child: new Column(
          children: <Widget>[
            new Icon(
              icon,
              color: warnaIcon,
              size: 100.0,
            ),
            new Text(
              teks,
              style: new TextStyle(fontSize: 20.0),
            )
          ],
        ),
      ),
    );
  }

}

Panggil custom card pada bagian body

body: new Container(
  child: new Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[

      new customCard(
        icon: Icons.home,
        teks: "Home",
        warnaIcon: Colors.brown ,
      ),

      new customCard(
        icon: Icons.favorite,
        teks: "Favourite",
        warnaIcon: Colors.pink ,
      ),

      new customCard(
        icon: Icons.place,
        teks: "Place",
        warnaIcon: Colors.blue ,
      ),

      new customCard(
        icon: Icons.settings,
        teks: "Setting",
        warnaIcon: Colors.black ,
      ),

    ],
  ),
)