Free copy-paste Card 005 for Flutter: a ready-to-use card widget with full Dart source code and a live preview. Works on desktop. No external packages.
Copy the Dart code below into a new file in your Flutter project (for example lib/widgets/card_005.dart) and use the widget anywhere in your widget tree.
import 'package:flutter/material.dart';
class Card005 extends StatefulWidget {
const Card005({
super.key,
this.title = 'Title',
this.subtitle = 'Lorem ipsum dolor sit amet, consectetur',
this.baseColor = const Color(0xFFEEEEEE),
this.iconColor = const Color(0xFFFF3B30),
this.onTap,
});
final String title;
final String subtitle;
final Color baseColor;
final Color iconColor;
final VoidCallback? onTap;
@override
State<Card005> createState() => _Card005State();
}
class _Card005State extends State<Card005> {
bool _hovered = false;
@override
Widget build(BuildContext context) {
return MouseRegion(
opaque: true,
cursor: SystemMouseCursors.click,
onEnter: (_) => setState(() => _hovered = true),
onExit: (_) => setState(() => _hovered = false),
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: widget.onTap,
child: AnimatedContainer(
duration: const Duration(milliseconds: 1000),
curve: Curves.easeInOutCubic,
width: 200,
height: _hovered ? 260 : 120,
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
decoration: BoxDecoration(
color: widget.baseColor,
borderRadius: BorderRadius.circular(22),
border: Border.all(color: widget.baseColor, width: 8),
boxShadow: [
BoxShadow(
color: const Color(0xFFBCBCBC).withValues(alpha: 0.6),
blurRadius: 10,
offset: const Offset(5, 5),
),
const BoxShadow(
color: Colors.white,
blurRadius: 10,
offset: Offset(-5, -5),
),
],
),
clipBehavior: Clip.antiAlias,
child: SingleChildScrollView(
physics: const NeverScrollableScrollPhysics(),
child: Column(
children: [
Container(
width: 56,
height: 56,
decoration: BoxDecoration(
color: widget.baseColor,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: const Color(0xFFD0D0D0).withValues(alpha: 0.8),
blurRadius: 8,
offset: const Offset(5, 5),
),
const BoxShadow(
color: Colors.white,
blurRadius: 8,
offset: Offset(-5, -5),
),
],
),
child: Icon(
Icons.favorite_rounded,
color: widget.iconColor,
size: 26,
),
),
const SizedBox(height: 14),
AnimatedOpacity(
duration: const Duration(milliseconds: 350),
curve: Curves.easeOut,
opacity: _hovered ? 1.0 : 0.0,
child: AnimatedScale(
duration: const Duration(milliseconds: 400),
curve: Curves.easeOutBack,
scale: _hovered ? 1.0 : 0.4,
child: Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: widget.baseColor,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: const Color(
0xFFD4D4D4,
).withValues(alpha: 0.8),
blurRadius: 8,
offset: const Offset(4, 4),
),
const BoxShadow(
color: Colors.white,
blurRadius: 8,
offset: Offset(-4, -4),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
widget.title,
style: const TextStyle(
color: Color(0xFF4A5568),
fontSize: 15,
fontWeight: FontWeight.w800,
shadows: [
Shadow(
color: Colors.white,
offset: Offset(1, 1),
blurRadius: 1,
),
],
),
),
const SizedBox(height: 6),
Text(
widget.subtitle,
textAlign: TextAlign.center,
style: const TextStyle(
color: Color(0xFF888888),
fontSize: 11,
height: 1.3,
),
),
],
),
),
),
),
],
),
),
),
),
);
}
}