Card 001 — Flutter Card Widget

Free copy-paste Card 001 for Flutter: a ready-to-use card widget with full Dart source code and a live preview. Works on web & windows & macos & linux. No external…

  • Category: Cards
  • Platforms: web, windows, macos, linux
  • Flutter SDK only — no external packages
  • Free to copy & use

Features

  • Custom username
  • Custom card width
  • Responsive to mouse interaction
  • Lightweight and reusable

When to use it

  • Portfolio project cards
  • Developer profile cards
  • Product or service cards
  • Tutorial/course cards
  • Project preview cards

How to use Card 001 in Flutter

Copy the Dart code below into a new file in your Flutter project (for example lib/widgets/card_001.dart) and use the widget anywhere in your widget tree.

Card 001 – Dart source code

import 'package:flutter/material.dart';

class Card001 extends StatefulWidget {
  const Card001({
    super.key,
    this.title = 'Gradient Card',
    this.username = 'myName02',
    this.width = 280,
    this.onFavorite,
    this.onCode,
    this.onShare,
  });

  final String title;
  final String username;
  final double width;
  final VoidCallback? onFavorite;
  final VoidCallback? onCode;
  final VoidCallback? onShare;

  @override
  State<Card001> createState() => _Card001State();
}

class _Card001State extends State<Card001> {
  bool isHovered = false;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      cursor: SystemMouseCursors.click,
      onEnter: (_) => setState(() => isHovered = true),
      onExit: (_) => setState(() => isHovered = false),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 1000),
        curve: Curves.easeOut,
        width: widget.width,
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: Colors.black87,
          borderRadius: BorderRadius.circular(20),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withValues(alpha: 0.25),
              blurRadius: isHovered ? 14 : 8,
              offset: Offset(0, isHovered ? 8 : 4),
            ),
          ],
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              height: 150,
              decoration: BoxDecoration(
                gradient: const LinearGradient(
                  colors: [Colors.purple, Colors.green],
                ),
                borderRadius: BorderRadius.circular(16),
              ),
              child: const Center(
                child: Text('Hover me', style: TextStyle(color: Colors.white)),
              ),
            ),
            const SizedBox(height: 15),
            Row(
              children: [
                Container(
                  width: 45,
                  height: 45,
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
                const SizedBox(width: 10),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      widget.title,
                      style: const TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Text(
                      widget.username,
                      style: const TextStyle(
                        color: Colors.white60,
                        fontSize: 13,
                      ),
                    ),
                  ],
                ),
              ],
            ),
            if (isHovered) ...[
              Row(
                children: [
                  IconButton(
                    onPressed: widget.onFavorite,
                    icon: const Icon(
                      Icons.favorite_border,
                      color: Colors.white70,
                    ),
                  ),
                  IconButton(
                    onPressed: widget.onCode,
                    icon: const Icon(Icons.code, color: Colors.white70),
                  ),
                  IconButton(
                    onPressed: widget.onShare,
                    icon: const Icon(Icons.share, color: Colors.white70),
                  ),
                ],
              ),
            ],
          ],
        ),
      ),
    );
  }
}

More Flutter Cards