scratch_3d_card 0.1.0

An animated 3D scratch card widget with gyroscope tilt and particle effects.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:scratch_3d_card/scratch_3d_card.dart';

void main() => runApp(const ExampleApp());

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scratch 3D Card Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const DemoPage(),
    );
  }
}

class DemoPage extends StatefulWidget {
  const DemoPage({super.key});

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  bool _won = false;
  Key _cardKey = UniqueKey();

  void _reset() => setState(() {
    _won = false;
    _cardKey = UniqueKey();
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF2F2F7),
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: const Text(
          'Apple Gift Card',
          style: TextStyle(fontWeight: FontWeight.w600),
        ),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Scratch3DCard(
              key: _cardKey,
              // ── Outer shell (white card that flips) ─────────────────────
              containerColor: Colors.white,
              containerPadding: const EdgeInsets.all(20),
              containerBorderRadius: BorderRadius.circular(22),
              containerShadow: [
                BoxShadow(
                  color: Colors.black.withValues(alpha: 0.08),
                  blurRadius: 20,
                  offset: const Offset(0, 4),
                ),
              ],
              // ── Logo header (tap to flip the whole card) ─────────────────
              logo: const Icon(Icons.apple, size: 22, color: Colors.black),
              logoText: 'Apple Gift Card',
              logoTextStyle: const TextStyle(
                fontSize: 17,
                fontWeight: FontWeight.w600,
                color: Colors.black,
              ),
              // ── Scratch area appearance ───────────────────────────────────
              cardColor: const Color(0xFF2C2C2E),
              scratchChipColor: Colors.white70,
              scratchToRevealText: 'Scratch to reveal',
              brushSize: 50,
              width: 320,
              height: 200,
              borderRadius: BorderRadius.circular(16),
              // ── Gyroscope 3D tilt ─────────────────────────────────────────
              enable3DTilt: true,
              // ── Completion ────────────────────────────────────────────────
              completionThreshold: 0.65,
              onComplete: () => setState(() => _won = true),
              // ── Back face ─────────────────────────────────────────────────
              showBackInitially: false,
              backImage: const AssetImage('assets/card_back.png'),
              // ── Revealed reward content ───────────────────────────────────
              child: Container(
                color: Colors.white,
                alignment: Alignment.center,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      'You won \$24',
                      style: TextStyle(
                        fontSize: 26,
                        fontWeight: FontWeight.bold,
                        color: Colors.black.withValues(alpha: 0.8),
                        letterSpacing: -0.5,
                      ),
                    ),
                    const SizedBox(height: 6),
                    Text(
                      'Apple Gift Card added to your account',
                      style: TextStyle(
                        fontSize: 13,
                        color: Colors.black.withValues(alpha: 0.45),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 16),
            Text(
              'Tap header to flip · Drag card to scratch',
              style: TextStyle(
                fontSize: 12,
                color: Colors.black.withValues(alpha: 0.35),
              ),
            ),
            if (_won) ...[
              const SizedBox(height: 20),
              TextButton.icon(
                onPressed: _reset,
                icon: const Icon(Icons.refresh),
                label: const Text('Try again'),
              ),
            ],
          ],
        ),
      ),
    );
  }
}