Free copy-paste Card 009 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_009.dart) and use the widget anywhere in your widget tree.
import 'package:flutter/material.dart';
class Card009 extends StatefulWidget {
const Card009({
super.key,
this.fileName = 'card.dart',
this.codeSnippet =
'class CustomCard extends StatelessWidget {\n const CustomCard({super.key});\n\n @override\n Widget build(BuildContext context) {\n return AnimatedContainer(\n duration: const Duration(milliseconds: 300),\n curve: Curves.easeOut,\n decoration: BoxDecoration(\n color: const Color(0xFF6366F1),\n borderRadius: BorderRadius.circular(16),\n boxShadow: const [\n BoxShadow(\n color: Colors.black26,\n blurRadius: 12,\n offset: Offset(0, 6),\n ),\n ],\n ),\n child: const Center(\n child: Text(\n \'Flutter UI\',\n style: TextStyle(\n color: Colors.white,\n fontWeight: FontWeight.bold,\n ),\n ),\n ),\n );\n }\n}',
this.chassisColor = const Color(0xFF24233B),
this.editorColor = const Color(0xFF49465C),
this.onTap,
});
final String fileName;
final String codeSnippet;
final Color chassisColor;
final Color editorColor;
final VoidCallback? onTap;
@override
State<Card009> createState() => _Card009State();
}
class _Card009State extends State<Card009> {
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.easeOutCubic,
transform: Matrix4.translationValues(0.0, _hovered ? -7.0 : 0.0, 0.0),
width: 290,
padding: const EdgeInsets.fromLTRB(14, 12, 14, 14),
decoration: BoxDecoration(
color: widget.chassisColor,
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: _hovered
? Colors.black.withValues(alpha: 0.6)
: const Color(0xFF49465C).withValues(alpha: 0.5),
blurRadius: _hovered ? 18 : 10,
offset: Offset(0, _hovered ? 12 : 8),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
children: [
const _WindowDot(color: Color(0xFFFF605C)),
const SizedBox(width: 6),
const _WindowDot(color: Color(0xFFFFBD44)),
const SizedBox(width: 6),
const _WindowDot(color: Color(0xFF00CA4E)),
const SizedBox(width: 20),
Text(
widget.fileName,
style: const TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.w500,
fontFamily: 'monospace',
),
),
],
),
const SizedBox(height: 12),
Container(
height: 240,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: widget.editorColor,
borderRadius: BorderRadius.circular(5),
),
child: ScrollConfiguration(
behavior: ScrollConfiguration.of(
context,
).copyWith(scrollbars: false),
child: SingleChildScrollView(
physics: const ClampingScrollPhysics(),
child: Text(
widget.codeSnippet,
style: const TextStyle(
color: Color(0xFFE2E8F0),
fontSize: 11.5,
fontFamily: 'monospace',
height: 1.45,
),
),
),
),
),
],
),
),
),
);
}
}
class _WindowDot extends StatelessWidget {
const _WindowDot({this.color = Colors.white});
final Color color;
@override
Widget build(BuildContext context) {
return Container(
width: 10,
height: 10,
decoration: BoxDecoration(color: color, shape: BoxShape.circle),
);
}
}