Free copy-paste Card 002 for Flutter: a ready-to-use card widget with full Dart source code and a live preview. Works on mobile & desktop. No external packages.
Copy the Dart code below into a new file in your Flutter project (for example lib/widgets/card_002.dart) and use the widget anywhere in your widget tree.
import 'package:flutter/material.dart';
class Card002 extends StatefulWidget {
const Card002({
super.key,
this.tag = 'Draggable',
this.tagColor = const Color(0xFF1389EB),
this.title =
'Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.',
this.date = 'Feb 24',
this.commentsCount = 18,
this.attachmentsCount = 7,
this.extraMembersCount = '+20',
this.onTap,
});
final String tag, title, date, extraMembersCount;
final Color tagColor;
final int commentsCount, attachmentsCount;
final VoidCallback? onTap;
@override
State<Card002> createState() => _Card002State();
}
class _Card002State extends State<Card002> {
bool _hovered = false;
@override
Widget build(BuildContext context) {
return MouseRegion(
opaque: true,
cursor: SystemMouseCursors.grab,
onEnter: (_) => setState(() => _hovered = true),
onExit: (_) => setState(() => _hovered = false),
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: widget.onTap,
child: AnimatedContainer(
duration: const Duration(milliseconds: 500),
width: 320,
padding: const EdgeInsets.all(18),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: _hovered
? const Color(0xFFA2B3CF).withValues(alpha: 0.5)
: Colors.transparent,
width: 2.5,
),
boxShadow: [
BoxShadow(
color: const Color(
0xFF636363,
).withValues(alpha: _hovered ? 0.25 : 0.1),
blurRadius: _hovered ? 14 : 8,
offset: const Offset(0, 3),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 4,
),
decoration: BoxDecoration(
color: widget.tagColor,
borderRadius: BorderRadius.circular(100),
),
child: Text(
widget.tag,
style: const TextStyle(
color: Colors.white,
fontSize: 11,
fontWeight: FontWeight.w600,
),
),
),
const Icon(
Icons.more_horiz,
color: Color(0xFF9FA4AA),
size: 20,
),
],
),
const SizedBox(height: 14),
Text(
widget.title,
style: const TextStyle(
color: Color(0xFF2E2E2F),
fontSize: 13.5,
height: 1.45,
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
_StatItem(
icon: Icons.access_time_rounded,
label: widget.date,
),
const SizedBox(width: 10),
_StatItem(
icon: Icons.chat_bubble_outline_rounded,
label: '${widget.commentsCount}',
),
const SizedBox(width: 10),
_StatItem(
icon: Icons.attach_file_rounded,
label: '${widget.attachmentsCount}',
),
],
),
Row(
children: [
const _AvatarBubble(
child: Icon(
Icons.person,
color: Colors.white,
size: 14,
),
),
Transform.translate(
offset: const Offset(-8, 0),
child: const _AvatarBubble(
child: Icon(
Icons.person,
color: Colors.white,
size: 14,
),
),
),
Transform.translate(
offset: const Offset(-16, 0),
child: _AvatarBubble(
child: Text(
widget.extraMembersCount,
style: const TextStyle(
color: Colors.white,
fontSize: 9,
fontWeight: FontWeight.w700,
),
),
),
),
],
),
],
),
],
),
),
),
);
}
}
class _StatItem extends StatelessWidget {
const _StatItem({this.icon = Icons.star, this.label = ''});
final IconData icon;
final String label;
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, size: 14, color: const Color(0xFF9FA4AA)),
const SizedBox(width: 3),
Text(
label,
style: const TextStyle(
color: Color(0xFF9FA4AA),
fontSize: 11,
fontWeight: FontWeight.w600,
),
),
],
);
}
}
class _AvatarBubble extends StatelessWidget {
const _AvatarBubble({this.child = const SizedBox.shrink()});
final Widget child;
@override
Widget build(BuildContext context) {
return Container(
width: 26,
height: 26,
decoration: BoxDecoration(
color: const Color(0xFF1C75DB),
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 1.5),
),
alignment: Alignment.center,
child: child,
);
}
}