Card Widget and Attributes

Card Widget and Attributes

ยท

2 min read

In Flutter, a Card widget is a material design card that represents a piece of information, typically within a contained area with a shadow. It is commonly used to display related information, such as a contact's details, a product, or any other content that benefits from a visually distinct and bordered presentation.

Here is a simple example of a Card widget in Flutter:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Card Widget Example'),
        ),
        body: Center(
          child: Card(
            color: Color.fromARGB(255, 230, 128, 255), // Background color of the card
            elevation: 5.0,     // Shadow depth
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15.0), // Custom shape
            ),
            margin: const EdgeInsets.all(20.0),
            clipBehavior: Clip.hardEdge, // Clipping behavior
            semanticContainer: false,     // Whether the card is a semantic container
            borderOnForeground: true,  // Margin around the card
            child: Container(
              padding: const EdgeInsets.all(20.0),
              child: const Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  ListTile(
                    leading: Icon(Icons.account_circle),
                    title: Text(
                      'Vinit Mepani',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    subtitle: Text('vinitmepani2712@gmail.com.com',
                     style: TextStyle(color: Colors.white)),
                  ),
                  SizedBox(height: 10.0),
                  Text(
                    'This is an example of a Card widget in Flutter. We can customize its appearance using various attributes.',
                    style: TextStyle(color: Colors.white),
                  ),
                ],
              ),
            ),     // Draw shape border above children
          ),
        ),
      ),
    );
  }
}

Attributes or properties commonly associated with the Card widget include:

  1. child: The main content of the card, typically another widget like Text, Column, Row, etc.

  2. color: The background color of the card.

  3. elevation: The shadow depth of the card, giving it a sense of elevation. Higher values result in a more pronounced shadow.

  4. shape: Defines the shape of the card, which can be customized using RoundedRectangleBorder, CircleBorder, or other shape classes.

  5. margin: The margin around the card.

  6. borderOnForeground: A boolean that determines whether the shape border should be drawn above or below the Card's children.

  7. clipBehavior: Determines how the content should be clipped inside the card. It can be set to Clip.none, Clip.hardEdge, or Clip.antiAlias.

  8. semanticContainer: A boolean that indicates whether the card should be considered a semantic container. If set to true, the card will be treated as a single entity for accessibility purposes.

These are some of the commonly used properties, but there are more available for fine-tuning the appearance and behavior of the Card widget in Flutter.

Did you find this article valuable?

Support Vinit Mepani (Flutter Developer) by becoming a sponsor. Any amount is appreciated!

ย