Free copy-paste Card 004 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_004.dart) and use the widget anywhere in your widget tree.
import 'dart:math' as math;
import 'dart:ui';
import 'package:flutter/material.dart';
class Card004 extends StatefulWidget {
const Card004({
super.key,
this.text = 'Click me',
this.textColor = Colors.black,
this.onTap,
});
final String text;
final Color textColor;
final VoidCallback? onTap;
@override
State<Card004> createState() => _Card004State();
}
class _Card004State extends State<Card004> {
bool _hovered = false;
bool _pressed = false;
@override
Widget build(BuildContext context) {
final double scale = _pressed ? 0.95 : (_hovered ? 1.07 : 1.0);
final double rotation = _pressed ? (1.7 * math.pi / 180.0) : 0.0;
final Color borderColor = _hovered ? Colors.black : Colors.white;
return MouseRegion(
opaque: true,
cursor: SystemMouseCursors.click,
onEnter: (_) => setState(() => _hovered = true),
onExit: (_) => setState(() {
_hovered = false;
_pressed = false;
}),
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTapDown: (_) => setState(() => _pressed = true),
onTapUp: (_) {
setState(() => _pressed = false);
widget.onTap?.call();
},
onTapCancel: () => setState(() => _pressed = false),
child: AnimatedScale(
scale: scale,
duration: const Duration(milliseconds: 1000),
curve: Curves.easeOutCubic,
child: AnimatedRotation(
turns: rotation / (2 * math.pi),
duration: const Duration(milliseconds: 1000),
curve: Curves.easeOutCubic,
child: ClipRRect(
borderRadius: BorderRadius.circular(17),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
child: AnimatedContainer(
duration: const Duration(milliseconds: 1000),
curve: Curves.easeInOut,
width: 190,
height: 254,
decoration: BoxDecoration(
color: const Color(0xFFD9D9D9).withValues(alpha: 0.58),
borderRadius: BorderRadius.circular(17),
border: Border.all(color: borderColor, width: 2),
),
child: Center(
child: Text(
widget.text,
style: TextStyle(
color: widget.textColor,
fontSize: 16,
fontWeight: FontWeight.w900,
letterSpacing: 0.5,
),
),
),
),
),
),
),
),
),
);
}
}