🎴 Flutter Metal Credit Card

A premium, realistic metal credit card UI implementation built with Flutter featuring advanced glass morphism effects, motion detection, authentic EMV chip design, and metallic finish that mimics real premium credit cards.

🏆 What Makes It Special

This project creates authentic metal credit card experiences with:

• Realistic metallic textures and finishes
• Premium card aesthetics matching real-world cards
• Motion-responsive 3D effects for immersive experience
• Professional banking-grade UI components
• Cross-platform metal card design system

✨ Features

🎨 Premium Metal Design

• Liquid Glass Effect: Advanced backdrop blur with layered transparency
• Realistic Metallic Finish: Authentic metal credit card appearance with proper shadows
• EMV Chip Simulation: Detailed chip design with animated contact pads
• Motion-Responsive UI: 3D tilt effects based on device orientation
• Smooth Animations: 60fps animations with proper easing curves
• Metal Texture: Premium metallic surface simulation

💳 Credit Card Support

• 8+ Card Types: VISA, Mastercard, AMEX, RuPay, Discover, Diners, JCB, UnionPay
• Smart Detection: Auto-detects card type from input number
• Dynamic Branding: Card-specific logos and color schemes
• Mastercard Gold: Premium gold metal gradient for Mastercard cards
• Professional Typography: Google Fonts integration with proper hierarchy
• Metal Card Aesthetics: Realistic credit card proportions and design

📱 Interactive Experience

• Real-time Input: Live card number formatting and validation
• Card Flip Animation: Smooth 3D flip to show CVV
• Motion Sensing: Accelerometer-based tilt detection
• Responsive Design: Adapts to all screen sizes (mobile, tablet, desktop)
• Touch Feedback: Gesture recognition and haptic responses

🔧 Technical Excellence

• Clean Architecture: Modular, maintainable code structure
• Performance Optimized: Efficient rendering with minimal rebuilds
• Memory Management: Proper disposal of resources and animations
• Cross-Platform: iOS, Android, macOS, and Web support
• Modern Flutter: Built with latest Flutter 3.7+ features

🚀 Getting Started

Prerequisites

• Flutter SDK 3.7.2 or higher
• Dart SDK 3.0.0 or higher
• iOS 12.0+ / Android 5.0+ (API 21+)

Installation

1. Clone the repository

git clone https://github.com/yazdanhaider/flutter_liquid_glass_credit_card.git
cd flutter_liquid_glass_credit_card

2. Install dependencies

flutter pub get

3. Run the app

flutter run

🎯 Usage Examples

Test Card Numbers

• VISA: 4111 1111 1111 1111
• Mastercard: 5555 5555 5555 4444 (Gold Design)
• AMEX: 3782 8224 6310 005
• Discover: 6011 1111 1111 1117
• RuPay: 6062 8288 8866 6688

Key Features Demo

1. Motion Detection: Tilt your device to see 3D card effects
2. Card Flipping: Tap CVV field to flip card and see back side
3. Live Updates: Type card numbers to see real-time formatting
4. Brand Detection: Automatic card type recognition and styling

🏗️ Architecture

lib/
├── components/          # Core UI components
│   ├── credit_card_widget.dart      # Main card widget
│   ├── emv_chip_widget.dart         # EMV chip simulation
│   └── glass_effect_container.dart  # Glass morphism effects
├── models/             # Data models
│   └── credit_card_model.dart       # Card data structure
├── services/           # Business logic
│   └── smart_motion_service.dart    # Motion detection
├── utils/              # Helper utilities
│   └── responsive_helper.dart       # Screen adaptation
├── widgets/            # Reusable widgets
│   ├── buttons/        # Action buttons
│   ├── dialogs/        # Modal dialogs
│   └── shimmer_effect_widget.dart   # Shimmer animations
└── screens/            # App screens
    └── credit_card_screen.dart      # Main screen

🎨 Customization

Color Schemes

• Mastercard: Premium gold gradient
• Other Cards: Professional black design
• Glass Effects: Customizable transparency levels
• Shimmer Intensity: Adjustable animation strength

Motion Settings

• Sensitivity: Configurable tilt detection
• Animation Speed: Customizable motion response
• Dead Zone: Filter micro-movements
• Smoothing: Adjust animation fluidity

📱 Platform Support

Platform	Status	Notes
iOS	✅ Full Support	Optimized for iOS 12+
Android	✅ Full Support	API 21+ compatibility
macOS	✅ Full Support	Native desktop experience
Web	✅ Full Support	Responsive web design

🔧 Dependencies

dependencies:
  flutter: ^3.7.2
  google_fonts: ^6.2.1 # Premium typography
  flutter_svg: ^2.0.10+1 # Vector graphics
  sensors_plus: ^6.1.1 # Motion detection

🎯 Use Cases

• Banking Apps: Metal credit card input forms and displays
• E-commerce: Payment processing UI with premium card aesthetics
• Fintech Apps: Financial product demos featuring realistic cards
• Portfolio Projects: Showcase advanced Flutter metal card design skills
• Learning: Study modern Flutter patterns for premium card UIs
• Card Issuers: Display and showcase metal credit card designs
• Payment Apps: Realistic card scanning and input interfaces

🚀 Performance

• 60fps Animations: Smooth motion effects
• Efficient Rendering: Minimal widget rebuilds
• Memory Optimized: Proper resource management
• Fast Startup: Quick app initialization
• Responsive UI: Instant user feedback

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License

🙏 Acknowledgments

• Flutter Team: For the amazing framework
• Material Design: For design inspiration
• Open Source Community: For various packages and tools

📞 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Email: [email protected]

---

⭐ Star this repository if you found it helpful!

Made with ❤️ by Yazdan Haider