holotilt 1.0.0

holotilt: ^1.0.0 copied to clipboard

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'HoloTilt Demo',
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: const Color(0xFF121214),
      ),
      home: const HoloTiltDemoScreen(),
    );
  }
}

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

  @override
  State<HoloTiltDemoScreen> createState() => _HoloTiltDemoScreenState();
}

class _HoloTiltDemoScreenState extends State<HoloTiltDemoScreen> {
  HoloPreset _selectedPreset = HoloPreset.gold;
  double _maxTiltDegrees = 14.0;
  bool _enableShimmer = true;
  bool _enableShadow = true;
  bool _enableSpecular = true;
  final double _parallaxDepth = 45.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            const SizedBox(height: 20),
            // Header
            const Text(
              "HoloTilt",
              style: TextStyle(
                color: Colors.white,
                fontSize: 32,
                fontWeight: FontWeight.bold,
                letterSpacing: 1.5,
              ),
            ),
            const SizedBox(height: 6),
            Text(
              "Interactive 3D Parallax & Holographic Foil Card",
              style: TextStyle(
                color: Colors.white.withAlpha(180),
                fontSize: 14,
              ),
            ),
            const SizedBox(height: 24),

            // Card Showcase Centerpiece
            Expanded(
              child: Center(
                child: HoloTilt(
                  width: 300,
                  height: 460,
                  maxTiltDegrees: _maxTiltDegrees,
                  preset: _selectedPreset,
                  enableShimmer: _enableShimmer,
                  enableShadow: _enableShadow,
                  enableSpecularHighlight: _enableSpecular,
                  borderRadius: BorderRadius.circular(24),
                  cardDecoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(24),
                    color: Colors.white,
                  ),
                  child: Column(
                    children: [
                      // Top Holographic Art Section
                      Expanded(
                        flex: 4,
                        child: Stack(
                          fit: StackFit.expand,
                          children: [
                            // Base Gradient
                            Container(
                              decoration: BoxDecoration(
                                gradient: LinearGradient(
                                  colors: _getCardBackgroundColors(_selectedPreset),
                                  begin: Alignment.topLeft,
                                  end: Alignment.bottomRight,
                                ),
                              ),
                            ),

                            // Floating Parallax Art Image
                            Center(
                              child: HoloParallaxLayer(
                                depth: _parallaxDepth,
                                child: Padding(
                                  padding: const EdgeInsets.only(
                                    top: 40.0,
                                    left: 20.0,
                                    right: 20.0,
                                    bottom: 16.0,
                                  ),
                                  child: Image.asset(
                                    'assets/roman_reigns.jpg',
                                    fit: BoxFit.contain,
                                    errorBuilder: (context, error, stackTrace) =>
                                        const Icon(
                                      Icons.workspace_premium,
                                      size: 140,
                                      color: Colors.white,
                                    ),
                                  ),
                                ),
                              ),
                            ),

                            // Floating Header Badges
                            Positioned(
                              top: 0,
                              left: 0,
                              right: 0,
                              child: HoloParallaxLayer(
                                depth: 25.0,
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(
                                    horizontal: 20,
                                    vertical: 20,
                                  ),
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Container(
                                        padding: const EdgeInsets.symmetric(
                                          horizontal: 10,
                                          vertical: 4,
                                        ),
                                        decoration: BoxDecoration(
                                          color: Colors.black.withAlpha(90),
                                          borderRadius: BorderRadius.circular(8),
                                        ),
                                        child: const Text(
                                          "HOLO EDITION",
                                          style: TextStyle(
                                            color: Colors.white,
                                            fontSize: 11,
                                            fontWeight: FontWeight.bold,
                                            letterSpacing: 1.0,
                                          ),
                                        ),
                                      ),
                                      Container(
                                        padding: const EdgeInsets.symmetric(
                                          horizontal: 8,
                                          vertical: 4,
                                        ),
                                        decoration: BoxDecoration(
                                          color: Colors.white.withAlpha(50),
                                          borderRadius: BorderRadius.circular(8),
                                        ),
                                        child: const Text(
                                          "#001",
                                          style: TextStyle(
                                            color: Colors.white,
                                            fontSize: 11,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),

                      // Bottom Info Card Section
                      Expanded(
                        flex: 1,
                        child: Container(
                          width: double.infinity,
                          padding: const EdgeInsets.symmetric(
                            horizontal: 20.0,
                            vertical: 12.0,
                          ),
                          color: Colors.white,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              const Row(
                                children: [
                                  Icon(
                                    Icons.auto_awesome,
                                    color: Colors.black87,
                                    size: 18,
                                  ),
                                  SizedBox(width: 6),
                                  Text(
                                    "The Tribal Chief",
                                    style: TextStyle(
                                      color: Colors.black,
                                      fontSize: 18,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                ],
                              ),
                              const SizedBox(height: 4),
                              Text(
                                "Roman Reigns • 1316 days reign",
                                style: TextStyle(
                                  color: Colors.grey[600],
                                  fontSize: 12,
                                  fontWeight: FontWeight.w400,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),

            // Controls Drawer / Bar
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
              decoration: const BoxDecoration(
                color: Color(0xFF1E1E22),
                borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const Text(
                        "Foil Theme",
                        style: TextStyle(
                          color: Colors.white70,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      DropdownButton<HoloPreset>(
                        value: _selectedPreset,
                        dropdownColor: const Color(0xFF2C2C32),
                        underline: const SizedBox(),
                        items: HoloPreset.values.map((preset) {
                          return DropdownMenuItem(
                            value: preset,
                            child: Text(
                              preset.name.toUpperCase(),
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 13,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          );
                        }).toList(),
                        onChanged: (val) {
                          if (val != null) setState(() => _selectedPreset = val);
                        },
                      ),
                    ],
                  ),
                  Row(
                    children: [
                      const Text(
                        "Tilt Angle",
                        style: TextStyle(color: Colors.white70, fontSize: 13),
                      ),
                      Expanded(
                        child: Slider(
                          value: _maxTiltDegrees,
                          min: 5.0,
                          max: 30.0,
                          divisions: 25,
                          label: "${_maxTiltDegrees.round()}°",
                          onChanged: (val) =>
                              setState(() => _maxTiltDegrees = val),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      _ToggleChip(
                        label: "Shimmer",
                        isActive: _enableShimmer,
                        onTap: () =>
                            setState(() => _enableShimmer = !_enableShimmer),
                      ),
                      _ToggleChip(
                        label: "Shadow",
                        isActive: _enableShadow,
                        onTap: () =>
                            setState(() => _enableShadow = !_enableShadow),
                      ),
                      _ToggleChip(
                        label: "Specular",
                        isActive: _enableSpecular,
                        onTap: () =>
                            setState(() => _enableSpecular = !_enableSpecular),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  List<Color> _getCardBackgroundColors(HoloPreset preset) {
    switch (preset) {
      case HoloPreset.gold:
        return const [
          Color(0xFFBF953F),
          Color(0xFFFCF6BA),
          Color(0xFFB38728),
          Color(0xFFFBF5B7),
          Color(0xFFAA771C),
        ];
      case HoloPreset.rainbow:
        return const [
          Color(0xFF1F1C2C),
          Color(0xFF928DAB),
        ];
      case HoloPreset.silver:
        return const [
          Color(0xFF434343),
          Color(0xFF000000),
        ];
      case HoloPreset.neonCyber:
        return const [
          Color(0xFF0F2027),
          Color(0xFF203A43),
          Color(0xFF2C5364),
        ];
      case HoloPreset.emerald:
        return const [
          Color(0xFF134E5E),
          Color(0xFF71B280),
        ];
      case HoloPreset.cosmic:
        return const [
          Color(0xFF2E0854),
          Color(0xFF5B1884),
          Color(0xFF14002C),
        ];
    }
  }
}

class _ToggleChip extends StatelessWidget {
  final String label;
  final bool isActive;
  final VoidCallback onTap;

  const _ToggleChip({
    required this.label,
    required this.isActive,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(16),
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 6),
        decoration: BoxDecoration(
          color: isActive ? Colors.blueAccent : Colors.white10,
          borderRadius: BorderRadius.circular(16),
        ),
        child: Text(
          label,
          style: TextStyle(
            color: isActive ? Colors.white : Colors.white60,
            fontSize: 12,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}