Exploring the Flutter Card Widget: A Comprehensive Guide

-

 


The Card widget in Flutter is one of the most widely used and flexible widgets for building material design UIs. Cards are commonly used to represent a piece of information, often with a rounded rectangular shape, that includes text, images, icons, or any combination of these elements. In Flutter, the Card widget provides a simple way to design beautiful and structured content blocks.

What is the Flutter Card Widget?

The Card widget in Flutter is a material design container that has a rectangular shape with rounded corners and a subtle shadow to create a sense of elevation. Cards are often used to display information or content that’s visually distinct, such as items in a list or grid.

The Card widget typically wraps other widgets (like Text, Image, or Column) to create visually appealing sections in your UI. You can also customize its appearance to match your app’s design and theme.

Basic Structure of a Card

Card(
  elevation: 4.0,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('This is a Card'),
  ),
)

Key Properties of the Card Widget

The Card widget has several properties that allow you to customize its appearance and behavior. Let’s go over these properties in detail.

1. child

  • Type: Widget?

  • Description: The child property is used to define the content inside the card. You can place any widget inside a card, such as Text, Image, Column, Row, or ListTile.

  • Example:

  • Card(
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('This is the content inside the card'),
  ),
)

2. elevation

  • Type: double?

  • Description: The elevation property controls the "shadow" of the card. It determines how elevated the card appears from the background, giving it a sense of depth. The higher the elevation value, the more pronounced the shadow.

  • Default Value: 1.0

  • Example:

  • Card(
  elevation: 8.0, // The card will appear more elevated with a larger shadow
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('This is an elevated card'),
  ),
)

3. shape

  • Type: ShapeBorder?

  • Description: The shape property allows you to define the shape of the card. By default, the card is rectangular with rounded corners. You can customize the shape by providing a ShapeBorder, such as RoundedRectangleBorder for rounded corners or BeveledRectangleBorder for beveled corners.

  • Example:

  • Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16.0),
  ),
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('Card with rounded corners'),
  ),
)

4. margin

  • Type: EdgeInsetsGeometry?

  • Description: The margin property controls the space around the card. You can use this to add padding between the card and the surrounding widgets or screen edges.

  • Default Value: EdgeInsets.zero

  • Example:

  • Card(
  margin: EdgeInsets.all(20.0), // Adds 20 pixels of space around the card
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('Card with margin'),
  ),
)

5. color

  • Type: Color?

  • Description: The color property allows you to set the background color of the card. By default, the card’s background is white, but you can customize it to fit your design.

  • Example:

  • Card(
  color: Colors.blueAccent, // Sets the card’s background color
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text(
      'Card with a custom color',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

6. clipBehavior

  • Type: Clip?

  • Description: The clipBehavior property controls how the contents of the card should be clipped to fit the card's shape. The default value is Clip.none, meaning the contents can overflow. You can set it to Clip.hardEdge, Clip.antiAlias, or Clip.antiAliasWithSaveLayer to apply clipping effects.

  • Example:

  • Card(
  clipBehavior: Clip.antiAlias, // Clips the content to the card's rounded shape
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16.0),
  ),
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('Card with clipped content'),
  ),
)

7. semanticContainer

  • Type: bool?

  • Description: The semanticContainer property is used for accessibility. When set to true, the card’s content is wrapped in a semantic container, which helps with accessibility features like screen readers. By default, this is set to true.

  • Example:

  • Card(
  semanticContainer: true, // Provides semantic information for accessibility
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('Accessible Card'),
  ),
)

Example: Using Card Widget in a Flutter App

Let’s now look at a practical example where we use the Card widget to display a simple list of items (like contacts) with an image, a title, and a subtitle.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ContactListScreen(),
    );
  }
}

class ContactListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Contact List'),
      ),
      body: ListView(
        padding: EdgeInsets.all(10.0),
        children: <Widget>[
          Card(
            elevation: 4.0,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
            margin: EdgeInsets.symmetric(vertical: 8.0),
            child: ListTile(
              leading: CircleAvatar(
                backgroundImage: NetworkImage('https://picsum.photos/id/1/200/300'),
              ),
              title: Text('John Doe'),
              subtitle: Text('john.doe@example.com'),
            ),
          ),
          Card(
            elevation: 4.0,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
            margin: EdgeInsets.symmetric(vertical: 8.0),
            child: ListTile(
              leading: CircleAvatar(
                backgroundImage: NetworkImage('https://picsum.photos/id/1/200/300'),
              ),
              title: Text('Jane Smith'),
              subtitle: Text('jane.smith@example.com'),
            ),
          ),
        ],
      ),
    );
  }
}

Explanation of the Example:

  • List of Cards: We have a ListView that displays multiple Card widgets. Each card represents a contact with a ListTile containing an avatar, title, and subtitle.

  • Customization: Each Card has an elevation of 4.0, rounded corners using RoundedRectangleBorder, and custom margins for spacing between items.

  • Image and Text: Inside each card, we use a ListTile to display the contact’s image (using CircleAvatar), name, and email address.

Conclusion

The Card widget in Flutter is a powerful and flexible widget that can be used to create visually appealing containers for displaying content. Whether you are building a list, grid, or individual content block, the Card widget allows you to customize various aspects such as elevation, shape, margin, and more.

By using the Card widget effectively, you can create clean, organized, and aesthetically pleasing UIs. It’s an essential widget to master when building material design apps in Flutter, and with its numerous properties, you can achieve a wide range of visual effects and user experiences.

With the examples and explanations in this blog, you should now have a solid understanding of how to use and customize the Card widget in your own Flutter applications.

Happy coding!😀

Comments

Post a Comment

Popular posts from this blog

Url Launcher using Flutter

-
Image
  Exploring the URL Launcher Package in Flutter: A Comprehensive Guide Introduction: In the world of Flutter app development, integrating external functionalities like opening URLs, making phone calls, sending emails, and more is essential for creating robust and user-friendly applications. This is where the URL Launcher package comes into play. This package provides a simple and efficient way to interact with external resources and services directly from your Flutter app. What is a URL Launcher? The URL Launcher package is a Flutter plugin that allows developers to launch various types of URLs and perform actions such as opening web pages, making phone calls, sending emails, and launching map applications. It abstracts the platform-specific code required for these tasks, making it easy to incorporate these functionalities into your Flutter apps regardless of the platform (Android or iOS). Installation: To start using the URL Launcher package in your Flutter project, follow these s...
Read more

If and Else in Flutter

-
Image
 Flutter if & else: 3 ways of implementation if and else statements allow developers to execute different blocks of code based on specific conditions. This can help to create more dynamic and responsive user interfaces by allowing the app to respond differently to different inputs or user interactions.    The Problem: In contrast, Flutter provides an error message when you attempt to use the if-else statement directly within your widget.                  Unfortunately, you can’t write if statement inside your widget as if you were writing in your method or function. But there are a few ways you can write a conditional statement inside your widget. Let’s see them.                A description of how to use an If Else Statement in a Flutter           widget: Using the Ternary Operator Using the Spread Operator Using the Method ...
Read more

Flutter Project Migration

-
Image
  Migration to null safety in flutter. Problem Statement:   The newer versions of Flutter supports null safety but the older versions of Flutter does not have this type of support, and to run older applications makes it difficult to build or run the application  in it. To overcome this problem we need to perform a migration of versions. Solution of this problem: Firstly we need to check the version of dart. It should be greater than or equal to 2.12. To check the version of dart use the following command dart --version After that we need to check dependency status, use the following command to perform the dependency status check dart pub outdated --mode=null-safety Here’s an example of the output for a simple package. The green checkmarked version for each package supports null safety: Before migrating the package’s code, update its dependencies to null-safe version: Run dart pub upgrade --null-safety to upgrade to the latest versions supporting null safety.  Note: ...
Read more