Contoh Card Pada Flutter


Card Pada Flutter


Berikut adalah contoh penggunaan widget card pada flutter

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new CardSaya()));
}

class CardSaya extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: new Text('Card APP'),
          backgroundColor: Colors.green,
        ),
        body: new Container(
            margin: EdgeInsets.all(20.0),
            child: new Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Card(
                      color: Colors.green,
                      child: new Column(children: <Widget>[
                        new Icon(
                          Icons.favorite,
                          size: 20.0,
                          color: Colors.pink,
                        ),
                        new Text('Favorites',
                            style: new TextStyle(fontSize: 20.0)),
                      ])),
                  Card(
                      color: Colors.blue,
                      child: new Column(children: <Widget>[
                        new Icon(
                          Icons.home,
                          size: 20.0,
                          color: Colors.pink,
                        ),
                        new Text('Home', style: new TextStyle(fontSize: 20.0)),
                      ])),
                  Card(
                      color: Colors.grey,
                      child: new Column(
                        children: <Widget>[
                          new Icon(
                            Icons.message,
                            size: 20.0,
                            color: Colors.pink,
                          ),
                          new Text('Message',
                              style: new TextStyle(fontSize: 20.0)),
                        ],
                      ))
                ])));
  }
}


Hasil dari sourcer code diatas dapat dilihat pada video dibawah




Tidak ada komentar:

Posting Komentar

Profile Page Screen - Flutter UI

Profile Page Berikut ini adalah contoh  source code untuk Design Profile Page menggunakan flutter,  sebelumnya jangan lupa untuk membua...