huahua_motion 0.0.3

huahua_motion: ^0.0.3 copied to clipboard

example/lib/main.dart

import 'package:flutter/material.dart';

import 'demos/focus_transform_demo.dart';
import 'demos/scroll_timeline_demo.dart';

void main() => runApp(const HuahuaMotionExampleApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Huahua Motion',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: const Color(0xff8d2c27),
          brightness: Brightness.light,
        ),
        scaffoldBackgroundColor: const Color(0xfffcf9f6),
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.transparent,
          foregroundColor: Color(0xff302926),
          elevation: 0,
        ),
        useMaterial3: true,
      ),
      home: const MotionCatalogPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Huahua Motion')),
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.fromLTRB(20, 8, 20, 32),
          children: [
            Text(
              'Composable motion for Flutter',
              style: Theme.of(context).textTheme.headlineMedium?.copyWith(
                color: const Color(0xff302926),
                fontWeight: FontWeight.w800,
              ),
            ),
            const SizedBox(height: 8),
            Text(
              'Choose a primitive to see its behavior and its smallest '
              'recommended import.',
              style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                color: const Color(0xff806f69),
                height: 1.45,
              ),
            ),
            const SizedBox(height: 28),
            _DemoCard(
              icon: Icons.center_focus_strong_rounded,
              title: 'Focus transform',
              description:
                  'Drive scale, opacity, and translation with one normalized '
                  'focus value.',
              importPath: 'package:huahua_motion/focus_transform.dart',
              onTap: () => Navigator.of(context).push(
                MaterialPageRoute<void>(
                  builder: (_) => const FocusTransformDemoPage(),
                ),
              ),
            ),
            const SizedBox(height: 16),
            _DemoCard(
              icon: Icons.view_timeline_rounded,
              title: 'Scroll focus + timeline',
              description:
                  'Mix irregular image, editorial, and text cards with '
                  'center-based snapping and an edge scrubber.',
              importPath:
                  'package:huahua_motion/'
                  'varied_extent_scroll_timeline.dart',
              onTap: () => Navigator.of(context).push(
                MaterialPageRoute<void>(
                  builder: (_) => const ScrollTimelineDemoPage(),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

  final IconData icon;
  final String title;
  final String description;
  final String importPath;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    return Card(
      clipBehavior: Clip.antiAlias,
      color: Colors.white,
      elevation: 0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(24),
        side: const BorderSide(color: Color(0xffeadfda)),
      ),
      child: InkWell(
        onTap: onTap,
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              DecoratedBox(
                decoration: const BoxDecoration(
                  color: Color(0xffffe9e4),
                  borderRadius: BorderRadius.all(Radius.circular(14)),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(11),
                  child: Icon(icon, color: const Color(0xff8d2c27)),
                ),
              ),
              const SizedBox(height: 18),
              Row(
                children: [
                  Expanded(
                    child: Text(
                      title,
                      style: Theme.of(context).textTheme.titleLarge?.copyWith(
                        color: const Color(0xff302926),
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ),
                  const Icon(
                    Icons.arrow_forward_rounded,
                    color: Color(0xff8d2c27),
                  ),
                ],
              ),
              const SizedBox(height: 8),
              Text(
                description,
                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                  color: const Color(0xff806f69),
                  height: 1.4,
                ),
              ),
              const SizedBox(height: 16),
              Container(
                width: double.infinity,
                padding: const EdgeInsets.all(12),
                decoration: BoxDecoration(
                  color: const Color(0xfff7f2ef),
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Text(
                  importPath,
                  style: const TextStyle(
                    color: Color(0xff6c5750),
                    fontFamily: 'monospace',
                    fontSize: 12,
                    height: 1.45,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}