Flutter Card Widget

The Flutter Card widget is a material design component that provides a visually distinct container for organizing related content. Based on Material Design's card concept, the Flutter Card creates a surface with subtle elevation, rounded corners, and a slight shadow, making it perfect for displaying grouped information.

Card(  
  child: Padding(  
    padding: EdgeInsets.all(16.0),  
    child: Text('This is a basic Flutter Card widget'),  
  ),  
)

Key Properties of the Flutter Card Widget

The Flutter Card widget comes with numerous properties that allow developers to create customized card designs. Let's examine the most important properties:

1. Child Property

The child property is the primary content of your Flutter Card widget. It can contain any widget:

Card(  
  child: Column(  
    mainAxisSize: MainAxisSize.min,  
    children: <Widget>[  
      ListTile(  
        leading: Icon(Icons.album),  
        title: Text('Card Title'),  
        subtitle: Text('Card Subtitle'),  
      ),  
    ],  
  ),  
)

2. Elevation Property

The elevation property in the Flutter Card widget determines how high the card appears to be raised above the surface, affecting its shadow:

Card(  
  elevation: 8.0, // Creates a more pronounced shadow  
  child: Text('Flutter Card with higher elevation'),  
)

3. Shape Property

The shape property allows you to customize the shape of your Flutter Card:

Card(  
  shape: RoundedRectangleBorder(  
    borderRadius: BorderRadius.circular(15.0),  
  ),  
  child: Text('Flutter Card with custom rounded corners'),  
)

4. Color Property

The color property sets the background color of your Flutter Card widget:

Card(  
  color: Colors.blue[100], // Light blue background  
  child: Text('Colored Flutter Card widget'),  
)

5. Margin Property

The margin property adds space around the Flutter Card:

Card(  
  margin: EdgeInsets.all(16.0),  
  child: Text('Flutter Card with margin'),  
)

6. ShadowColor Property

The shadowColor property customizes the shadow color of your Flutter Card widget:

Card(  
  elevation: 5.0,  
  shadowColor: Colors.red, // Red shadow  
  child: Text('Flutter Card with colored shadow'),  
)

7. ClipBehavior Property

The clipBehavior property determines how the content within the Flutter Card is clipped:

Card(  
  clipBehavior: Clip.antiAlias, // Smooths the edges of the clipped content  
  child: Image.network('https://picsum.photos/250?image=9'),  
)

8. BorderOnForeground Property

The borderOnForeground property determines whether to paint the border in the foreground:

Card(  
  borderOnForeground: false, // Border painted behind the child  
  child: Text('Flutter Card with border behind'),  
)

Flutter Card Widget Examples with Explanations

Now that we understand the properties, let's explore some practical examples of how to use the Flutter Card widget in real applications.

Example 1: Basic Profile Card

Card(  
  elevation: 4.0,  
  margin: EdgeInsets.all(16.0),  
  child: Padding(  
    padding: EdgeInsets.all(16.0),  
    child: Column(  
      crossAxisAlignment: CrossAxisAlignment.start,  
      children: <Widget>[  
        CircleAvatar(  
          radius: 30,  
          backgroundImage: NetworkImage('https://picsum.photos/id/237/200/300'),  
        ),  
        SizedBox(height: 10),  
        Text(  
          'John Doe',  
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),  
        ),  
        Text('Flutter Developer'),  
        SizedBox(height: 10),  
        Row(  
          children: <Widget>[  
            Icon(Icons.email),  
            SizedBox(width: 5),  
            Text('john.doe@example.com'),  
          ],  
        ),  
      ],  
    ),  
  ),  
)

Example 2: Interactive Product Card

Card(  
  clipBehavior: Clip.antiAlias,  
  shape: RoundedRectangleBorder(  
    borderRadius: BorderRadius.circular(10.0),  
  ),  
  elevation: 5,  
  child: Column(  
    crossAxisAlignment: CrossAxisAlignment.start,  
    children: <Widget>[  
      Image.network(  
        'https://picsum.photos/250?image=9',  
        height: 150,  
        width: double.infinity,  
        fit: BoxFit.cover,  
      ),  
      Padding(  
        padding: EdgeInsets.all(16.0),  
        child: Column(  
          crossAxisAlignment: CrossAxisAlignment.start,  
          children: <Widget>[  
            Text(  
              'Wireless Headphones',  
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),  
            ),  
            SizedBox(height: 8),  
            Text('Premium sound quality with noise cancellation'),  
            SizedBox(height: 8),  
            Text(  
              '\\$129.99',  
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.green),  
            ),  
            SizedBox(height: 8),  
            ElevatedButton(  
              onPressed: () {},  
              child: Text('Add to Cart'),  
            ),  
          ],  
        ),  
      ),  
    ],  
  ),  
)

Example 3: News Article Card

Card(  
  margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),  
  elevation: 3.0,  
  child: Column(  
    children: <Widget>[  
      Row(  
        crossAxisAlignment: CrossAxisAlignment.start,  
        children: <Widget>[  
          Expanded(  
            flex: 1,  
            child: Image.network(  
              'https://picsum.photos/250?image=18',  
              height: 100,  
              fit: BoxFit.cover,  
            ),  
          ),  
          Expanded(  
            flex: 2,  
            child: Padding(  
              padding: EdgeInsets.all(12.0),  
              child: Column(  
                crossAxisAlignment: CrossAxisAlignment.start,  
                children: <Widget>[  
                  Text(  
                    'Latest Updates on Flutter Framework',  
                    style: TextStyle(  
                      fontWeight: FontWeight.bold,  
                      fontSize: 16,  
                    ),  
                  ),  
                  SizedBox(height: 6),  
                  Text(  
                    'New features and improvements in the latest release of Flutter',  
                    style: TextStyle(fontSize: 14),  
                  ),  
                  SizedBox(height: 6),  
                  Text(  
                    '2 hours ago',  
                    style: TextStyle(  
                      color: Colors.grey,  
                      fontSize: 12,  
                    ),  
                  ),  
                ],  
              ),  
            ),  
          ),  
        ],  
      ),  
      Divider(height: 1),  
      Padding(  
        padding: EdgeInsets.symmetric(vertical: 8.0),  
        child: Row(  
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
          children: <Widget>[  
            TextButton.icon(  
              icon: Icon(Icons.thumb_up),  
              label: Text('Like'),  
              onPressed: () {},  
            ),  
            TextButton.icon(  
              icon: Icon(Icons.comment),  
              label: Text('Comment'),  
              onPressed: () {},  
            ),  
            TextButton.icon(  
              icon: Icon(Icons.share),  
              label: Text('Share'),  
              onPressed: () {},  
            ),  
          ],  
        ),  
      ),  
    ],  
  ),  
)

Example 4: Custom Styled Flutter Card

Card(  
  elevation: 6.0,  
  shape: RoundedRectangleBorder(  
    borderRadius: BorderRadius.circular(12.0),  
    side: BorderSide(  
      color: Colors.purple.shade300,  
      width: 2.0,  
    ),  
  ),  
  shadowColor: Colors.purpleAccent.withOpacity(0.5),  
  child: Container(  
    padding: EdgeInsets.all(16.0),  
    child: Column(  
      children: <Widget>[  
        Icon(  
          Icons.star,  
          size: 50,  
          color: Colors.amber,  
        ),  
        SizedBox(height: 12),  
        Text(  
          'Premium Feature',  
          style: TextStyle(  
            fontSize: 18,  
            fontWeight: FontWeight.bold,  
          ),  
        ),  
        SizedBox(height: 8),  
        Text(  
          'Unlock all advanced features with our premium subscription plan',  
          textAlign: TextAlign.center,  
        ),  
        SizedBox(height: 16),  
        ElevatedButton(  
          style: ElevatedButton.styleFrom(  
            backgroundColor: Colors.purple,  
            foregroundColor: Colors.white,  
            shape: RoundedRectangleBorder(  
              borderRadius: BorderRadius.circular(30.0),  
            ),  
          ),  
          onPressed: () {},  
          child: Padding(  
            padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),  
            child: Text('Upgrade Now'),  
          ),  
        ),  
      ],  
    ),  
  ),  
)

Advanced Techniques with Flutter Card Widget

Combining Flutter Card with InkWell for Ripple Effects

Card(  
  elevation: 4.0,  
  child: InkWell(  
    splashColor: Colors.blue.withAlpha(30),  
    onTap: () {  
      print('Card tapped');  
    },  
    child: Container(  
      width: 300,  
      height: 100,  
      child: Center(  
        child: Text('Tap this Flutter Card widget for ripple effect'),  
      ),  
    ),  
  ),  
)

Creating a Flutter Card with a Gradient Background

Card(  
  shape: RoundedRectangleBorder(  
    borderRadius: BorderRadius.circular(15.0),  
  ),  
  elevation: 5,  
  child: Container(  
    decoration: BoxDecoration(  
      borderRadius: BorderRadius.circular(15.0),  
      gradient: LinearGradient(  
        colors: [Colors.blue, Colors.purple],  
        begin: Alignment.topLeft,  
        end: Alignment.bottomRight,  
      ),  
    ),  
    child: Padding(  
      padding: EdgeInsets.all(16.0),  
      child: Text(  
        'Flutter Card widget with gradient background',  
        style: TextStyle(  
          color: Colors.white,  
          fontSize: 16,  
        ),  
      ),  
    ),  
  ),  
)

Flutter Card vs. Container Widget

While the Flutter Card widget provides ready-made styling with elevation and rounded corners, a Container with a BoxDecoration can achieve similar results with more manual customization:

// Using Flutter Card widget  
Card(  
  elevation: 5.0,  
  shape: RoundedRectangleBorder(  
    borderRadius: BorderRadius.circular(10.0),  
  ),  
  child: Padding(  
    padding: EdgeInsets.all(16.0),  
    child: Text('Flutter Card example'),  
  ),  
)  
  
// Using Container  
Container(  
  decoration: BoxDecoration(  
    color: Colors.white,  
    borderRadius: BorderRadius.circular(10.0),  
    boxShadow: [  
      BoxShadow(  
        color: Colors.grey.withOpacity(0.5),  
        spreadRadius: 2,  
        blurRadius: 5,  
        offset: Offset(0, 3),  
      ),  
    ],  
  ),  
  padding: EdgeInsets.all(16.0),  
  child: Text('Container styled like a card'),  
)

Related Topics