morphing_sheet 0.6.2

morphing_sheet: ^0.6.2 copied to clipboard

example/lib/main.dart

import 'package:flutter/material.dart';

import 'card_carousel_example.dart';
import 'combined_demo/screens/product_grid_screen.dart';
import 'morphing_card_demo.dart';
import 'overlay_demo.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Morphing Sheet Demos',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorSchemeSeed: const Color(0xFF6750A4),
        brightness: Brightness.light,
        useMaterial3: true,
      ),
      darkTheme: ThemeData(
        colorSchemeSeed: const Color(0xFF6750A4),
        brightness: Brightness.dark,
        useMaterial3: true,
      ),
      home: const DemoHub(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(height: 32),
              Text('Morphing Sheet', style: theme.textTheme.headlineLarge),
              const SizedBox(height: 4),
              Text(
                'v0.6.0',
                style: theme.textTheme.titleMedium?.copyWith(
                  color: theme.colorScheme.primary,
                ),
              ),
              const SizedBox(height: 8),
              Text(
                'A production-ready Flutter package for spatial morphing '
                'transitions — supporting card carousels, overlay morph, and '
                'the new MorphingCard spatial framework.',
                style: theme.textTheme.bodyLarge?.copyWith(
                  color: theme.colorScheme.onSurface.withValues(alpha: 0.7),
                ),
              ),
              const SizedBox(height: 40),
              _DemoCard(
                icon: Icons.auto_awesome_outlined,
                title: 'Combined Flow Demo',
                subtitle:
                    'Overlay → Card Carousel → Fullscreen — all 3 modes in one flow',
                badge: 'FLAGSHIP',
                onTap: () => Navigator.of(context).push(
                  MaterialPageRoute(builder: (_) => const ProductGridScreen()),
                ),
              ),
              const SizedBox(height: 16),
              _DemoCard(
                icon: Icons.view_carousel_outlined,
                title: 'Card Carousel Mode',
                subtitle:
                    'v0.3.0 — Centered morphing card with horizontal swipe',
                onTap: () => Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (_) => const CardCarouselExamplePage(),
                  ),
                ),
              ),
              const SizedBox(height: 16),
              _DemoCard(
                icon: Icons.open_in_full_outlined,
                title: 'Overlay Carousel Mode',
                subtitle:
                    'v0.5.0 — Tap-to-morph card carousel with fullscreen expand',
                onTap: () => Navigator.of(context).push(
                  MaterialPageRoute(builder: (_) => const OverlayDemoPage()),
                ),
              ),
              const SizedBox(height: 16),
              _DemoCard(
                icon: Icons.flip_to_front_outlined,
                title: 'MorphingCard (Spatial)',
                subtitle:
                    'v0.6.0 — Card → fullscreen with origin preservation & drag-to-collapse',
                badge: 'NEW',
                onTap: () => Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (_) => const MorphingCardDemoPage(),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _DemoCard extends StatelessWidget {
  const _DemoCard({
    required this.icon,
    required this.title,
    required this.subtitle,
    required this.onTap,
    this.badge,
  });

  final IconData icon;
  final String title;
  final String subtitle;
  final VoidCallback onTap;
  final String? badge;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Card(
      elevation: 2,
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(12),
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Row(
            children: [
              Container(
                width: 56,
                height: 56,
                decoration: BoxDecoration(
                  color: theme.colorScheme.primaryContainer,
                  borderRadius: BorderRadius.circular(16),
                ),
                child: Icon(
                  icon,
                  size: 28,
                  color: theme.colorScheme.onPrimaryContainer,
                ),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Text(title, style: theme.textTheme.titleMedium),
                        if (badge != null) ...[
                          const SizedBox(width: 8),
                          Container(
                            padding: const EdgeInsets.symmetric(
                              horizontal: 8,
                              vertical: 2,
                            ),
                            decoration: BoxDecoration(
                              color: theme.colorScheme.primary,
                              borderRadius: BorderRadius.circular(8),
                            ),
                            child: Text(
                              badge!,
                              style: theme.textTheme.labelSmall?.copyWith(
                                color: theme.colorScheme.onPrimary,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ],
                      ],
                    ),
                    const SizedBox(height: 4),
                    Text(
                      subtitle,
                      style: theme.textTheme.bodySmall?.copyWith(
                        color: theme.colorScheme.onSurfaceVariant,
                      ),
                    ),
                  ],
                ),
              ),
              Icon(
                Icons.chevron_right,
                color: theme.colorScheme.onSurfaceVariant,
              ),
            ],
          ),
        ),
      ),
    );
  }
}