Card Widget In Flutter

Pankaj Tyagi

27 April 2023

Card Widget In Flutter?
Do you know about card view in android, if yes then you are very familiar with this, yes the card widget here is almost the same like we use in android with properties elevation, rounded corners, and much more.

You may also check our flutter app development services.

If not, then don’t worry, we will check out it in this article.
We use card to show our views inside a card. it can be used to display a list of some specific data like- call or phone list on your Mobile phone.

In Flutter it is designed from Google’s Material Design Library.
Apart from elevation and rounded corner property, it has many more properties like color, shape, shadow color, etc which lets us customize it the way we want.

Constructor of card Widget.

const Card({

Key? key,

this.color,

this.shadowColor,

this.elevation,

this.shape,

this.borderOnForeground = true,

this.margin,

this.clipBehavior,

this.child,

this.semanticContainer = true,

})

Let’ take a simple example to explore it more.

Example Of Card Widget

In this example, we are showing a list of some phone calls details using static data.

import 'package:flutter/material.dart';

void main() =&gt; runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter Card Sample")),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    final List&lt;String&gt; phoneNumber = &lt;String&gt;&#091;
      '6666677897',
      '7777777777',
      '3498789678',
      '7897989780'
    ];
    final List&lt;String&gt; callType = &lt;String&gt;&#091;
      "Incoming",
      "Outgoing",
      "Incoming",
      "Missed"
    ];

return ListView.separated(
      shrinkWrap: true,
      padding: const EdgeInsets.all(8),
      itemCount: phoneNumber.length,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          color: Colors.white,
          borderOnForeground: true,
          elevation: 10,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: &lt;Widget&gt;&#091;
              ListTile(
                leading: Icon(Icons.call),
                title: Text("${phoneNumber&#091;index]}",
                    style: TextStyle(color: Colors.green)),
                subtitle: Text(
                  "${callType&#091;index]}",
                  style: TextStyle(color: Colors.orangeAccent),
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: &lt;Widget&gt;&#091;
                  TextButton(
                    child: const Text('Dail'),
                    onPressed: () {/* ... */},
                  ),
                  const SizedBox(width: 8),
                  TextButton(
                    child: const Text('Call History'),
                    onPressed: () {/* ... */},
                  ),
                ],
              ),
            ],
          ),
        );
      },
      separatorBuilder: (BuildContext context, int index) =&gt; const Divider(),
    );
  }
}

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {

const MyApp({Key key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(title: const Text("Flutter Card Sample")),

body: const MyStatelessWidget(),

);

}

class MyStatelessWidget extends StatelessWidget {

const MyStatelessWidget({Key key}) : super(key: key);

@override

Widget build(BuildContext context) {

final List<String> phoneNumber = <String>[

'6666677897',

'7777777777',

'3498789678',

'7897989780'

];

final List<String> callType = <String>[

"Incoming",

"Outgoing",

"Incoming",

"Missed"

];

return ListView.separated(

shrinkWrap: true,

padding: const EdgeInsets.all(8),

itemCount: phoneNumber.length,

itemBuilder: (BuildContext context, int index) {

return Card(

color: Colors.white,

borderOnForeground: true,

elevation: 10,

child: Column(

mainAxisSize: MainAxisSize.min,

children: <Widget>[

ListTile(

leading: Icon(Icons.call),

title: Text("${phoneNumber[index]}",

style: TextStyle(color: Colors.green)),

subtitle: Text(

"${callType[index]}",

style: TextStyle(color: Colors.orangeAccent),

Row(

mainAxisAlignment: MainAxisAlignment.end,

children: <Widget>[

TextButton(

child: const Text('Dail'),

onPressed: () {/* ... */},

const SizedBox(width: 8),

TextButton(

child: const Text('Call History'),

onPressed: () {/* ... */},

);

separatorBuilder: (BuildContext context, int index) => const Divider(),

);

}

Result:

fig: showing phone list using Flutter Card Widget

Conclusion

In this blog, we learn how we can use the Card Widget in our Flutter app to design our views.

Thanks For Reading