Flutter UI — Two Card Designs: Normal Card & Blur-Overlay Card (with code) | PradeeptheDeveloper

Flutter Card Designs — Normal Card & Blur-Overlay Card

This post shows two reusable Flutter card widgets: NormalCard (image → name → description → stats row) and BlurCard (image background with a blurred bottom overlay containing the same content). Replace the image placeholders with screenshots from your emulator.

Preview

What you'll get

Image (network or asset)
Name and description text
Stats row: person icon + count, message icon + count, and a Follow button
Two visual styles: stacked and blur-overlay

Copy-paste Flutter widgets

Paste these classes into your Flutter project. I escaped the angle brackets so they display correctly in Blogger — copy the inner Dart code and replace the HTML entities if your editor changed them.

NormalCard

import 'package:flutter/material.dart';

class NormalCard extends StatelessWidget {
  final String imageUrl;
  final String name;
  final String description;
  final int followers;
  final int messages;

  const NormalCard({
    Key? key,
    required this.imageUrl,
    required this.name,
    required this.description,
    required this.followers,
    required this.messages,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Image.network(imageUrl, fit: BoxFit.cover),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(name, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Text(description),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                const Icon(Icons.person, size: 20),
                const SizedBox(width: 4),
                Text('\$followers'),
                const SizedBox(width: 16),
                const Icon(Icons.message, size: 20),
                const SizedBox(width: 4),
                Text('\$messages'),
                const Spacer(),
                ElevatedButton(onPressed: () {}, child: const Text('Follow')),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

BlurCard

import 'dart:ui';
import 'package:flutter/material.dart';

class BlurCard extends StatelessWidget {
  final String imageUrl;
  final String name;
  final String description;
  final int followers;
  final int messages;

  const BlurCard({
    Key? key,
    required this.imageUrl,
    required this.name,
    required this.description,
    required this.followers,
    required this.messages,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      clipBehavior: Clip.hardEdge,
      child: Stack(
        children: [
          Image.network(imageUrl, fit: BoxFit.cover, width: double.infinity, height: 200),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: ClipRect(
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 8, sigmaY: 8),
                child: Container(
                  padding: const EdgeInsets.all(8),
                  color: Colors.black.withOpacity(0.3),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(name, style: const TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold)),
                      Text(description, style: const TextStyle(color: Colors.white70)),
                      const SizedBox(height: 8),
                      Row(
                        children: [
                          const Icon(Icons.person, size: 20, color: Colors.white),
                          const SizedBox(width: 4),
                          Text('\$followers', style: const TextStyle(color: Colors.white)),
                          const SizedBox(width: 16),
                          const Icon(Icons.message, size: 20, color: Colors.white),
                          const SizedBox(width: 4),
                          Text('\$messages', style: const TextStyle(color: Colors.white)),
                          const Spacer(),
                          ElevatedButton(onPressed: () {}, child: const Text('Follow')),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Quick usage example

Use these widgets in a screen (example: inside a ListView).

class ExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.all(16),
      children: [
        NormalCard(
          imageUrl: 'https://picsum.photos/400/200',
          name: 'John Doe',
          description: 'Flutter Developer & Designer',
          followers: 120,
          messages: 45,
        ),
        const SizedBox(height: 20),
        BlurCard(
          imageUrl: 'https://picsum.photos/400/200?grayscale',
          name: 'Jane Smith',
          description: 'UI/UX Enthusiast',
          followers: 200,
          messages: 75,
        ),
      ],
    );
  }
}

Tips

If the blur overlay looks strong/weak, adjust ImageFilter.blur sigma values.
Use Image.asset if you want to bundle the image as an app asset; otherwise Image.network works for remote images.
Make the Follow button stateful to toggle "Follow" / "Following".

Flutter UI — Two Card Designs: Normal Card & Blur-Overlay Card (with code)