Skip to content
Related Articles

Related Articles

Improve Article
Flutter – Card Widget
  • Difficulty Level : Hard
  • Last Updated : 08 Dec, 2020

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.

Constructor of Card class:

const Card(
{Key key,
Color color,
Color shadowColor,
double elevation,
ShapeBorder shape,
bool borderOnForeground: true,
EdgeInsetsGeometry margin,
Clip clipBehavior,
Widget child,
bool semanticContainer: true}
)

Properties of Card Widget: 

  • 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 widger 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 library
void 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
                  ), //CirclAvatar
                  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.

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :