Flutter - Card Widget - GeeksforGeeks

21 Feb, 2022
Card is a build-in widget in flutter which derives its design from Google’s Material Design Library. The functionality of this widget on screen is, it is bland space or panel with round corners and a slight elevation on the lower side. It comes with many properties like color, shape, shadow color, etc which lets developers customize it the way they like. Below we will go through al its properties and an example to see its implementation.
const Card(
{Key key,
Color color,
Color shadowColor,
double elevation,
ShapeBorder shape,
bool borderOnForeground: true,
EdgeInsetsGeometry margin,
Clip clipBehavior,
Widget child,
bool semanticContainer: true}
)
borderOnForeground: This property takes in a boolean value as an object to decide whether to print a border or not.
child: This property takes in a widget as an object to show inside the Card widget.
clipBehavior: This property decides whether the content inside the Card will be clipped or not. It takes Clip enum as an object.
color: This property assigns background color to the card by taking in the Color class as the object.
elevation: This property takes in a double value as the object to decide the z-coordinate where the card should be placed.
margin: This property takes in EdgeInsetsGeometry as the object to add empty space around the Card.
semanticContainer: This property takes in a boolean as the object. This controls whether the Card widget with all its child widget will be seen as a single widget or not.
shadowColor: This property takes in Color class as the object to assign a color to the shadow, which appears beneath the card. By default, the color is set to black.
shape: This property takes ShapeBorder class as the object to decide the shape of the Card widget.
Example: 
Dart
import 'package:flutter/material.dart'; //imported google's material design libraryvoid main() {  runApp(      /**Our App Widget Tree Starts Here**/      MaterialApp(    home: Scaffold(      appBar: AppBar(        title: Text('GeeksforGeeks'),        backgroundColor: Colors.greenAccent[400],        centerTitle: true,      ), //AppBar      body: Center(        /** Card Widget **/        child: Card(          elevation: 50,          shadowColor: Colors.black,          color: Colors.greenAccent[100],          child: SizedBox(            width: 300,            height: 500,            child: Padding(              padding: const EdgeInsets.all(20.0),              child: Column(                children: [                  CircleAvatar(                    backgroundColor: Colors.green[500],                    radius: 108,                    child: CircleAvatar(                      backgroundImage: NetworkImage(                          "https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"), //NetworkImage                      radius: 100,                    ), //CircleAvatar                  ), //CircleAvatar                  SizedBox(                    height: 10,                  ), //SizedBox                  Text(                    'GeeksforGeeks',                    style: TextStyle(                      fontSize: 30,                      color: Colors.green[900],                      fontWeight: FontWeight.w500,                    ), //Textstyle                  ), //Text                  SizedBox(                    height: 10,                  ), //SizedBox                  Text(                    'GeeksforGeeks is a computer science portal                    for geeks at geeksforgeeks.org. It contains                    well written, well thought and well explained                    computer science and programming articles,                    quizzes, projects, interview experienxes                    and much more!!',                    style: TextStyle(                      fontSize: 15,                      color: Colors.green[900],                    ), //Textstyle                  ), //Text                  SizedBox(                    height: 10,                  ), //SizedBox                  SizedBox(                    width: 80,                    child: RaisedButton(                      onPressed: () => null,                      color: Colors.green,                      child: Padding(                        padding: const EdgeInsets.all(4.0),                        child: Row(                          children: [                            Icon(Icons.touch_app),                            Text('Visit'),                          ],                        ), //Row                      ), //Padding                    ), //RaisedButton                  ) //SizedBox                ],              ), //Column            ), //Padding          ), //SizedBox        ), //Card      ), //Center    ), //Scaffold  ) //MaterialApp      );}
Output: 
Explanation: In this flutter app the Center is the parent widget to all, which is holding Card widget as a child. The properties of Card widget which are employed here are elevation which is set to 50, make the card look a little up from the white background, shadowColor which is assigned black color (it is giving a faint shadow beneath the card), and color is assigned greenAccent[400] as the object (it is responsible for the green background of the card). The Card widget is holding SizedBox widget as the child, which is, in turn, holding the Padding as the child. There is a 20 px empty space in the card,  which is assigned by the padding property.The Column widget is holding CircleAvatar (image), two Text widgets and a RaisedButton all separated by SizedBox widget. And the end results of all this is this beautiful card.
sumitgumber28
simranarora5sos
Flutter-widgets
Android
Dart
Flutter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Create and Add Data to SQLite Database in Android?
Broadcast Receiver in Android With Example
Content Providers in Android with Example
Android RecyclerView in Kotlin
Flutter - Custom Bottom Navigation Bar
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Getter and Setter Methods in Dart
Flutter - Checkbox Widget
Dart - Standard Input Output