How to Create Flutter CardView?

Flutter CardView

In this tutorial, we will see Flutter CardView Example. Flutter is the mobile Application SDK by Google which helps in creating modern mobile apps for Android and IOS using the single code base.

Flutter is the new entrant in the cross-platform mobile app development.

Flutter CardView

CardView which essentially can be thought of as a FrameLayout with round corners and shadow based on it's elevation.


main.dart

import 'package:flutter/material.dart';
import 'dart:async';

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

class MyApp extends StatefulWidget {
  @override  _State createState() => new _State();
}

class _State extends State<MyApp> {
  @override  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Name here'),
        backgroundColor: Colors.red,
      ),

      body: new Container(
        padding: new EdgeInsets.all(32.0),
        child: new Center(
          child: new Column(
            children: <Widget>[
              new Card(
                  child:
                      Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
                ListTile(
                  leading: const Icon(Icons.album),
                  title: Text('The Baby is having: Tea'),
                  subtitle: Text('99 Votes.'),
                ),
                new ButtonTheme.bar(
                    child: new ButtonBar(children: <Widget>[
                  new FlatButton(
                    child: const Text('Thumb up'),
                    onPressed: () {/* ... */},
                  ),
                  new FlatButton(
                    child: const Text('Thumb down'),
                    onPressed: () {/* ... */},
                  )
                ]))
              ])),
              new Card(
                  child:
                      Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
                ListTile(
                  leading: const Icon(Icons.album),
                  title: Text('The Baby is having: Tea'),
                  subtitle: Text('99 Votes.'),
                ),
                new ButtonTheme.bar(
                    child: new ButtonBar(children: <Widget>[
                  new FlatButton(
                    child: const Text('Thumb up'),
                    onPressed: () {/* ... */},
                  ),
                  new FlatButton(
                    child: const Text('Thumb down'),
                    onPressed: () {/* ... */},
                  )
                ]))
              ]))
            ],
          ),
        ),
      ),
    );
  }
}