Flutter - ClipPath Widget

Flutter – Card Widget

Last Updated : 09 Sep, 2024

Card is a built-in widget in Flutter which derives its design from Google’s Material Design Library. The functionality of this widget on screen is, that it is a bland space or panel with round corners and a slight elevation on the lower side. It comes with many properties like color, shape, shadow colour, etc which lets developers customize it the way they like. Below we will go through all 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:

Properties	Description
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 the 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: const 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: const CircleAvatar(
                      backgroundImage: NetworkImage(
                          "https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"), //NetworkImage
                      radius: 100,
                    ), //CircleAvatar
                  ), //CircleAvatar
                  const SizedBox(
                    height: 10,
                  ), //SizedBox
                  Text(
                    'GeeksforGeeks',
                    style: TextStyle(
                      fontSize: 30,
                      color: Colors.green[900],
                      fontWeight: FontWeight.w500,
                    ), //Textstyle
                  ), //Text
                  const SizedBox(
                    height: 10,
                  ), //SizedBox
                  const 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 experiences and much more!!',
                    style: TextStyle(
                      fontSize: 15,
                      color: Colors.green,
                    ), //Textstyle
                  ), //Text
                  const SizedBox(
                    height: 10,
                  ), //SizedBox
                  SizedBox(
                    width: 100,

                    child: ElevatedButton(
                      onPressed: () => 'Null',
                      style: ButtonStyle(
                          backgroundColor:
                              MaterialStateProperty.all(Colors.green)),
                      child: Padding(
                        padding: const EdgeInsets.all(4),
                        child: Row(
                          children: const [
                            Icon(Icons.touch_app),
                            Text('Visit')
                          ],
                        ),
                      ),
                    ),
                    // RaisedButton is deprecated and should not be used
                    // Use ElevatedButton instead

                    // child: RaisedButton(
                    //   onPressed: () => null,
                    //   color: Colors.green,
                    //   child: Padding(
                    //     padding: const EdgeInsets.all(4.0),
                    //     child: Row(
                    //       children: const [
                    //         Icon(Icons.touch_app),
                    //         Text('Visit'),
                    //       ],
                    //     ), //Row
                    //   ), //Padding
                    // ), //RaisedButton
                  ) //SizedBox
                ],
              ), //Column
            ), //Padding
          ), //SizedBox
        ), //Card
      ), //Center
    ), //Scaffold
  ) //MaterialApp
      );
}

Output:

gfglogo

Output

Explanation of the above Program:

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, makes 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 result of all this is this beautiful card.

Flutter - ClipPath Widget

ankit_kumar_

Improve

Article Tags :

Similar Reads

Flutter - Banner Widget

Banner widget comes built-in with flutter API. It is somewhat similar to the debug banner that we are used to seeing on the top-right corner on a flutter app in debug mode. It enables us to show a message or text on top of any other widget. Below we will see its implementation with the help of an ex

Flutter - Chip Widget

Chip is a material design widget which comes built-in with flutter. It can simply be described as a compact element holding an icon and text, usually a rounded rectangle in the background. It can serve many purposes, like it can be simply used as a button, representing a user with a CircleAvatar and

Flutter - Expanded Widget

Expanded widget in flutter comes in handy when we want a child widget or children widgets to take all the available space along the main-axis (for Row the main axis is horizontal & vertical for Column). Expanded widget can be taken as the child of Row, Column, and Flex. And in case if we don't w

Flutter - ClipPath Widget

In Flutter, the ClipPath widget is used to clip its child widget using a custom path. This means you can define a specific shape or path, and the ClipPath widget will restrict the rendering of its child to be only within that shape or along that path. In this article, we are going to implement the C

Drawer Widget in Flutter

Drawer widget is used to provide access to different destinations and functionalities provided in your application. It is represented by three horizontal parallel lines on the upper end of the scaffold. It has a horizontal movement from the edge of the Scaffold that navigates the link to different r

Flutter - Custom Widgets

We create Custom Widgets when we want a custom look and feel to our app, and we know that there will be a repetition of a particular widget. We can create the custom widget in a new dart file with all the codes and defining the parameters that we need in the constructor. For more on how to split wid

Flutter - CircleAvatar Widget

CircleAvatar widget comes built-in with the flutter SDK. It is simply a circle in which we can add background color, background image, or just some text. It usually represents a user with his image or with his initials. Although we can make a similar widget from the ground up, this widget comes in h

Flutter - Empty Widget

Empty widget is the flutter widget that is mainly used to notify the user about some event, Like if we are fetching the data from the API or From the database, There may be a case when API returns the null at that moment we can show the empty widget. Also If there is no user internet connection we c

Flutter - BorderSide Widget

BorderSide widget in flutter is a built-in widget whose function is to control the look and feel of individual sides of the border around a widget. Border widget in flutter also takes BorderSide as the object, which is the representative of individual sides. Constructor of BorderSide Class:const Bor

Flutter - ColoredBox Class Widget

A Colored Box is a container that fills it with color according to its child or A widget that paints its area with a specified Color and then draws its child on top of that color. A sample image is given below to get an idea about what we are going to do in this article. How to use it? You can simpl