Free copy-paste Card 006 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_006.dart) and use the widget anywhere in your widget tree.
import 'package:flutter/material.dart';
class Card006 extends StatefulWidget {
const Card006({
super.key,
this.labels = const ['HOVER ME', 'HOVER ME', 'HOVER ME'],
this.backgroundColor = const Color(0xFF212121),
this.accentColor = const Color(0xFFFF5A91),
this.onPanelTap,
});
final List<String> labels;
final Color backgroundColor;
final Color accentColor;
final ValueChanged<int>? onPanelTap;
@override
State<Card006> createState() => _Card006State();
}
class _Card006State extends State<Card006> {
int _hoveredIndex = -1;
@override
Widget build(BuildContext context) {
return Container(
width: 250,
height: 254,
padding: const EdgeInsets.all(7),
decoration: BoxDecoration(
color: widget.backgroundColor,
borderRadius: BorderRadius.circular(4),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.35),
blurRadius: 16,
offset: const Offset(0, 8),
),
],
),
child: Row(
children: List.generate(widget.labels.length, (index) {
final isHovered = _hoveredIndex == index;
final flex = isHovered ? 3 : 1;
return Expanded(
flex: flex,
child: Padding(
padding: EdgeInsets.only(
left: index == 0 ? 0 : 2.5,
right: index == widget.labels.length - 1 ? 0 : 2.5,
),
child: MouseRegion(
opaque: true,
cursor: SystemMouseCursors.click,
onEnter: (_) => setState(() => _hoveredIndex = index),
onExit: (_) => setState(() {
if (_hoveredIndex == index) _hoveredIndex = -1;
}),
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => widget.onPanelTap?.call(index),
child: AnimatedContainer(
duration: const Duration(milliseconds: 1000),
curve: Curves.easeInOut,
decoration: BoxDecoration(
color: widget.backgroundColor,
borderRadius: BorderRadius.circular(2),
border: Border.all(color: widget.accentColor, width: 1),
),
clipBehavior: Clip.antiAlias,
child: Center(
child: AnimatedRotation(
turns: isHovered ? 0.0 : -0.25,
duration: const Duration(milliseconds: 1000),
curve: Curves.easeInOut,
child: Text(
widget.labels[index],
maxLines: 1,
overflow: TextOverflow.visible,
softWrap: false,
style: TextStyle(
color: widget.accentColor,
fontSize: 13,
fontWeight: FontWeight.w600,
letterSpacing: 1.5,
),
),
),
),
),
),
),
),
);
}),
),
);
}
}