holographic_card_flutter 0.1.0

A Flutter library for creating beautiful holographic ID cards with interactive effects

example/lib/main.dart

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

void main() {
  runApp(const MyApp());
}

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

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

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

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

class _DemoPageState extends State<DemoPage> {
  bool _enableGyro = true;
  bool _enableShader = true;
  double _sensitivity = 0.3;

  void _handleMatrikelnrCopy(String value) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Copied Matrikelnr: $value')),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Holographic Card Demo'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                'Interactive Student ID Card',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 20),
              Center(
                child: HolographicCard(
                  name: 'Anton Rockenstein',
                  email: '[e-mail]',
                  validUntil: 'Gültig bis 30.09.2025',
                  matrikelnr: '12842818',
                  lrzKennung: 'roa1284',
                  braille: '⠇⠍⠥',

                  // Visual customization
                  cardColor: const Color(0xFFBEBEBE),
                  hologramColor: Colors.white70,
                  borderRadius: 15,

                  // Interactive features
                  enableGyro: _enableGyro,
                  enableShader: _enableShader,
                  gestureSensitivity: _sensitivity,
                  gyroSensitivity: _sensitivity,

                  // Assets
                  hologramAsset: 'assets/holograms/LMU-Sigel.svg',
                  hologramAsset2: 'assets/holograms/LMUcard.svg',

                  // Callbacks
                  onMatrikelnrCopy: _handleMatrikelnrCopy,
                  onCardTap: () => ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Card tapped!')),
                  ),
                ),
              ),
              const SizedBox(height: 32),
              const Text(
                'Controls',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 16),
              SwitchListTile(
                title: const Text('Enable Gyroscope'),
                subtitle: const Text('Use device motion for effects'),
                value: _enableGyro,
                onChanged: (bool value) {
                  setState(() => _enableGyro = value);
                },
              ),
              SwitchListTile(
                title: const Text('Enable Shader Effects'),
                subtitle: const Text('Advanced holographic patterns'),
                value: _enableShader,
                onChanged: (bool value) {
                  setState(() => _enableShader = value);
                },
              ),
              ListTile(
                title: const Text('Effect Sensitivity'),
                subtitle: Slider(
                  value: _sensitivity,
                  min: 0.1,
                  max: 1.0,
                  divisions: 9,
                  label: _sensitivity.toStringAsFixed(1),
                  onChanged: (double value) {
                    setState(() => _sensitivity = value);
                  },
                ),
              ),
              const SizedBox(height: 16),
              const Card(
                child: Padding(
                  padding: EdgeInsets.all(16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Interactions:',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      SizedBox(height: 8),
                      Text('• Tap to trigger animation'),
                      Text('• Double tap to flip card'),
                      Text('• Touch and drag to control effects'),
                      Text('• Move device to see gyroscope effects'),
                      Text('• Tap on Matrikelnr to copy'),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}