Holographic Card Flutter #

A Flutter library for creating beautiful holographic ID cards with interactive effects. Perfect for student IDs, membership cards, or any application requiring a premium card interface with modern interactive elements.

Features #

• 🎨 Interactive holographic effects with customizable colors and patterns
• 📱 Dual interaction modes:
  • Gyroscope-based motion tracking
  • Touch gesture controls
• 💫 Advanced visual effects:
  • Custom shader-based holographic patterns
  • Dynamic shadow effects
  • Smooth animations
  • Grain texture overlay
• 🔄 Interactive card features:
  • Flip animation
  • Tap and double-tap actions
  • Copy functionality for card details
• 🎯 Highly customizable:
  • Card dimensions and border properties
  • Colors and transparency
  • Shadow properties
  • Movement sensitivity
  • Asset placement and sizing
• ♿ Accessibility features:
  • Braille support
  • High contrast options
  • Customizable text sizes

Getting started #

Add this to your package's pubspec.yaml file:

dependencies:
  holographic_card_flutter: ^0.1.0

Usage #

Basic Usage #

import 'package:holographic_card_flutter/holographic_card_flutter.dart';

HolographicCard(
  name: 'John Doe',
  email: 'john.doe@example.com',
  validUntil: 'Valid until 31.12.2025',
  matrikelnr: '12345678',
  lrzKennung: 'doe1234',
  hologramAsset: 'assets/holograms/LMU-Sigel.svg',
  hologramAsset2: 'assets/holograms/LMUcard.svg',
)

Advanced Usage #

HolographicCard(
  // User data
  name: 'John Doe',
  email: 'john.doe@campus.lmu.de',
  validUntil: 'Valid until 31.12.2025',
  matrikelnr: '12345678',
  lrzKennung: 'doe1234',
  braille: '⠇⠍⠥',

  // Card styling
  width: 350,
  height: 220,
  borderRadius: 15,
  cardColor: Color(0xFFBEBEBE),
  hologramColor: Colors.white70,

  // Interactive features
  enableFlip: true,
  enableGyro: true,
  enableGestures: true,
  enableShader: true,

  // Sensitivity settings
  gestureSensitivity: 0.3,
  gyroSensitivity: 0.3,

  // Assets and positioning
  logoAsset: 'assets/logo.svg',
  hologramAsset: 'assets/holograms/LMU-Sigel.svg',
  hologramAsset2: 'assets/holograms/LMUcard.svg',

  // Callbacks
  onCardTap: () => print('Card tapped'),
  onMatrikelnrCopy: (value) => print('Copied: $value'),
)

Customization #

Visual Properties #

• cardColor: Main card background color
• textColor: Primary text color
• secondaryTextColor: Secondary text color
• logoColor: Color of the logo
• hologramColor: Base color for holographic effects
• borderCardColor: Card border color

Interaction Settings #

• gestureSensitivity: Touch gesture sensitivity (0.0 to 1.0)
• gyroSensitivity: Gyroscope sensitivity (0.0 to 1.0)
• gyroSmoothing: Smoothing factor for gyroscope movements
• hologramCenterMovement: Hologram movement range
• shadowOffsetMultiplier: Shadow movement intensity
• shadowIntensityMultiplier: Shadow darkness multiplier

Shader Effects #

• shaderWaveFrequency: Frequency of holographic wave patterns
• shaderPointerInfluence: Touch/gyro influence on shader
• shaderColorAmplitude: Color variation intensity
• shaderBaseAlpha: Base transparency of shader effects

Additional Information #

For more examples and usage information, please visit the example directory.

License #

This project is licensed under the MIT License - see the LICENSE file for details.