What is Flutter Card widget?

Key takeaways:
The Card widget includes properties like elevation for depth effects, color for background styling, margin for spacing, and shape for defining rounded or custom corners, making it a versatile UI element.
Using interactive wrappers like GestureDetector or InkWell, Card widgets can handle gestures such as taps, enabling dynamic behavior like changing colors or triggering actions.
Combining Card widgets with StatefulWidget enables dynamic updates, such as toggling attributes like color, and ensures real-time responsiveness via the setState method.
Enhance Card widgets by incorporating images, nested widgets, and detailed styling with properties like shadowColor and BorderRadius.only for tailored, visually appealing designs.

Flutter is all about creating efficient and visually appealing applications for users that are easy to use and capture users' attention while providing a seamless experience. This is possible with Flutter's wide range of built-in powerful widgets that help build a stunning user interface.

Flutter Card widget

Flutter Card widget is a pre-built user interface element that represents a curved rectangular container with rounded edges. It serves as a metaphor for physical cards, allowing users to create a digital copy of their playing or business cards.

Moreover, the Card widget provides a variety of applications. For example, they can be used to display various types of information, which could be text, icons, or even a nested combination of these elements.

Material design library

The Flutter Card widget belongs to the Material design library present within Flutter. The material package can be installed on any .dart file in which you want to incorporate this widget.

Card widget attributes

The Card widget has a number of required attributes that can be set according to the user's specifications. Specifying these parameters allows the widget to function properly according to the user's needs.

Elevation: Specifies the depth or "elevation" of the card, creating a visual effect of it being raised above the surface it is placed on.
Color: Allows you to define the background color of the card.
Margin: Defines the distance between the card and its surrounding widgets or the edges of its parent container.
Shape: Used to define the visual shape of the card.
Child: Specifies the content that will be displayed within the card.
Padding: Allows you to add space inside the Card widget between its edges and the content inside it. This ensures that the text or any other content inside the card does not directly touch the borders, giving it a neat and clean layout.

Initializing the Card widget in Flutter

Let's see how we can initialize the Card widget in Flutter:

In this example, we create a basic card that displays a welcome message. We set the elevation to 4.0, giving the card a subtle shadow effect. The shape property defines the rounded corners of the card by specifying the borderRadius. Inside the card, we use a Container widget to add padding and then display a Text widget with a specific style.

Incorporating the Card widget in your Flutter app

In this example, we will define a MyCard widget that extends StatefulWidget to manage its state. The _MyCardState class will maintain the color of the card using the _cardColor variable, initially set to Colors.blue.

import 'package:flutter/material.dart';

class MyCard extends StatefulWidget {
  @override
  _MyCardState createState() => _MyCardState();
}

class _MyCardState extends State<MyCard> {
  Color _cardColor = Colors.blue; // Initial card color

  void _changeColor() {
    setState(() {
      _cardColor = _cardColor == Colors.blue ? Colors.red : Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _changeColor,
      child:Padding(
        padding: EdgeInsets.all(100),
        child: Card(
        color: _cardColor,
        elevation: 4.0,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: Container(
          padding: EdgeInsets.all(20.0),
          child: Text(
            'Tap me to change color!',
            style: TextStyle(fontSize: 18.0, color: Colors.white),
          ),
        ),
      ),
    ),
    );
  }
}

Using Card widget

Explanation

Lines 11–15: We define the _changeColor method, which updates the state and changes the _cardColor to either Colors.red or Colors.blue using a conditional statement. setState is called to notify Flutter that the state has changed, triggering a rebuild of the widget tree.
Lines 19–21: The MyCard widget is wrapped in a GestureDetector to detect the tap gesture. Then it is wrapped with padding to give an appealing visual layout. When the card is tapped, the _changeColor function is invoked, leading to the color change.
Lines 29–33: We define a container and apply padding to it to make it visually appealing. The child of this Container is a Text widget.

Customization tips for Card widget

Adding images: You can enhance the Card widget by including an image inside it. This is especially useful for visually appealing UI elements such as profile cards, product showcase cards, or promotional materials.
Interactive cards: Cards can also hold interactive elements like buttons or sliders. You can wrap the Card in interactive widgets like InkWell or GestureDetector to make it tappable or clickable, improving the user interaction experience.
Shadow and border customization: Beyond just the elevation property, you can fine-tune the card’s shadow using the shadowColor property and add more customized borders using the borderOnForeground attribute to give your card a standout appearance.
Rounded corners with custom radius: While the shape property defines rounded corners, you can provide specific values for each corner to create custom shapes, using BorderRadius.only.

Conclusion

The Flutter Card widget is a powerful and versatile tool for creating visually appealing, interactive, and customizable UI elements that provide a smooth user experience. By mastering its attributes, such as elevation, color, margin, shape, and child properties, along with adding padding and interactivity through gestures, developers can build dynamic and responsive interfaces. With the flexibility to integrate images, buttons, and shadows, the Card widget enhances both functionality and aesthetics in cross-platform applications.

Further learning

Deep dive into state management techniques like Provider, Riverpod, or Bloc for handling complex card interactions.
Explore custom widget creation by extending the Card widget with additional Flutter components for advanced UI needs.
Learn how to integrate animations within the Card widget for smoother transitions and a more interactive user experience.
Investigate Flutter's material design guidelines to better understand how to create consistent, modern UI components across platforms.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

What is the difference between card and container in Flutter?

The primary difference between a Card and a Container in Flutter lies in their functionality and design purpose:

Card: The Card widget is a pre-built UI component from Flutter’s Material Design library. It comes with predefined styling, such as rounded corners, elevation (shadow), and a border that gives it a raised look. The Card widget is ideal for displaying structured content with a clean, polished appearance, such as profile cards or lists.

Container: The Container widget is a more flexible and versatile widget that acts as a general-purpose box for layout and styling. It doesn’t come with built-in elevation or rounded corners, but it allows you to customize its shape, size, padding, margin, alignment, decoration, and more. Containers are highly customizable and can be styled to mimic a Card widget, but it requires more manual configuration.

In summary, use a Card when you need a Material Design card-like element with built-in styling, and use a Container when you need flexibility and complete control over layout and design.

What are widget cards?

Widget cards in Flutter refer to UI elements created using the Card widget from the Material Design library. A widget card is essentially a rectangular container with rounded corners and optional elevation (shadow), giving it a raised, 3D-like appearance. It is commonly used to group related information, such as a user profile, product details, or a list of items, in a clean, visually appealing format.

The Card widget can hold other widgets like text, images, icons, or even a combination of these elements. It helps create structured and polished user interfaces while maintaining a consistent design aligned with Material Design principles. Widget cards are particularly useful for presenting content in a modular, well-organized way that enhances the user experience.

How many widgets are in Flutter?

Flutter provides a vast number of widgets, and it’s difficult to give an exact count because the Flutter framework is continuously evolving with new releases and updates. However, there are hundreds of widgets built into Flutter, categorized into various types based on their functionality, such as layout, input, navigation, styling, and more.

Some key categories of Flutter widgets include:

Structural widgets: Like Container, Padding, and Center, which are used for layout and structure.
Interactive widgets: Like GestureDetector, Button, and TextField, which handle user input and interactions.
Styling widgets: Like Text, Icon, and Image, used for displaying content.
Material Design widgets: Like AppBar, Scaffold, Card, and Snackbar, which follow Google’s Material Design principles.
Cupertino widgets: Like CupertinoButton, CupertinoSlider, which mimic iOS design patterns.

Flutter’s rich widget catalog allows developers to create nearly any type of UI with flexibility and customization. Additionally, developers can create their own custom widgets for specific needs.

Free Resources