Flutter Card Widget Example

This article explains you how to implement flutter card UI in mobile applications. We are using card widget to customize card UI in flutter applications. You can also check out flutter card view related articles.

Flutter card widget has many properties like elevation, shape, child, color, shadow color, clip behavior etc. In this example, we are going to understand how to use these properties to customize card widget.

child property is used to display widget inside the card widget. color property is used to set background color of card widget. By default shadow color of card widget is black. We can change shadow color of card widget using shadow color attribute.

shape property is used to set shape of card widget. elevation attribute is used to take double value as input and set z-coordinate where card is placed. clipBehavior property is used to decide content inside card will be clipped or not. We can also set space around card widget using margin property.

borderOnForeground property is used to paint border around the card widget. semanticContainer property is used to decide card widget with all child widgets will be seen as single widget or not.

 
import ‘package:flutter/material.dart’;

class MyCardScreen extends StatefulWidget {
@override
_MyCardScreenState createState() => _MyCardScreenState();
}

class _MyCardScreenState extends State<MyCardScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Flutter Card Sample’),
),
body: Center(
child: Card(
elevation: 50,
shadowColor: Colors.black,
color: Colors.yellow,
child: SizedBox(
width: 300,
height: 275,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
SizedBox(
    height: 10,
), //SizedBox
Text(
    ’92’,
    style: TextStyle(
        fontSize: 50,
        color: Colors.black,
        fontWeight: FontWeight.bold,
    ), //Textstyle
), //Text
SizedBox(
    height: 10,
),
Text(
    ‘Cristiano Ronaldo’,
    style: TextStyle(
         fontSize: 30,
        color: Colors.black,
        fontWeight: FontWeight.bold,
    ), //Textstyle
), //Text
SizedBox(
     height: 15,
), //SizedBox
Row(
children: [
Column(
children: [
Container(
child: Text(
    ’89 PAC’,
    style: TextStyle(
         fontSize: 23,
        color: Colors.black,
    ), //Textstyle
),
),
Text(
    ’93 SHO’,
    style: TextStyle(
         fontSize: 23,
        color: Colors.black,
    ), //Textstyle
),
Text(
    ’81 PAS’,
    style: TextStyle(
         fontSize: 23,
        color: Colors.black,
    ), //Textstyle
),
],
),
SizedBox(
    width: 50,
),
Column(
children: [
Text(
    ’89 DRI’,
    style: TextStyle(
         fontSize: 23,
        color: Colors.black,
    ), //Textstyle
),
Text(
    ’35 DEF’,
    style: TextStyle(
         fontSize: 23,
        color: Colors.black,
    ), //Textstyle
),
Text(
    ’77 PHY’,
    style: TextStyle(
         fontSize: 23,
        color: Colors.black,
    ), //Textstyle
),
],
),
],
),
SizedBox(
    height: 10,
), //SizedBox
],
), //Column
), //Padding
), //SizedBox
), //Card
),
);
}
}

 
 
flutter card
 

2 thoughts on “Flutter Card Widget Example

Leave a Reply