Card 003 — Flutter Card Widget

Free copy-paste Card 003 for Flutter: a ready-to-use card widget with full Dart source code and a live preview. Works on desktop. No external packages.

  • Category: Cards
  • Platforms: desktop
  • Flutter SDK only — no external packages
  • Free to copy & use

How to use Card 003 in Flutter

Copy the Dart code below into a new file in your Flutter project (for example lib/widgets/card_003.dart) and use the widget anywhere in your widget tree.

Card 003 – Dart source code

import 'dart:math' as math;

import 'package:flutter/material.dart';

class Card003 extends StatefulWidget {
  const Card003({
    super.key,
    this.child,
    this.innerColor = const Color(0xFF1A1A1A),
    this.gradientStart = const Color(0xFF00FF75),
    this.gradientEnd = const Color(0xFF3700FF),
    this.onTap,
  });

  final Widget? child;
  final Color innerColor;
  final Color gradientStart;
  final Color gradientEnd;
  final VoidCallback? onTap;

  @override
  State<Card003> createState() => _Card003State();
}

class _Card003State extends State<Card003> {
  bool _hovered = false;

  @override
  Widget build(BuildContext context) {
    const double rad = 163.0 * math.pi / 180.0;
    final Alignment begin = Alignment(math.cos(rad), math.sin(rad));
    final Alignment end = Alignment(-math.cos(rad), -math.sin(rad));

    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.easeOut,
          width: 190,
          height: 254,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            gradient: LinearGradient(
              begin: begin,
              end: end,
              colors: [widget.gradientStart, widget.gradientEnd],
            ),
            boxShadow: _hovered
                ? [
                    BoxShadow(
                      color: widget.gradientStart.withValues(alpha: 0.35),
                      blurRadius: 30,
                      spreadRadius: 1,
                    ),
                  ]
                : const [],
          ),
          alignment: Alignment.center,
          child: AnimatedScale(
            scale: _hovered ? 0.98 : 1.0,
            duration: const Duration(milliseconds: 200),
            curve: Curves.easeOut,
            child: Container(
              width: 190,
              height: 254,
              decoration: BoxDecoration(
                color: widget.innerColor,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Center(
                child:
                    widget.child ??
                    const Icon(
                      Icons.electric_bolt_rounded,
                      color: Color(0xFF00FF75),
                      size: 40,
                    ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

More Flutter Cards