animation_module 0.0.2

A reusable animation module for Flutter

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animation Module Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MainNavigationScreen(),
    );
  }
}

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

  @override
  State<MainNavigationScreen> createState() => _MainNavigationScreenState();
}

class _MainNavigationScreenState extends State<MainNavigationScreen> {
  int _currentIndex = 0;

  final List<Widget> _screens = [
    const ListScreen(),
    const GridScreen(),
    const CustomAnimationScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _screens[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            label: 'List',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.grid_view),
            label: 'Grid',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.movie_filter),
            label: 'Custom',
          ),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final List<String> items = List.generate(
      20,
      (index) => 'Item ${index + 1}',
    );

    return Scaffold(
      appBar: AppBar(
        title: const Text('List View'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: ListView.builder(
        padding: const EdgeInsets.all(16),
        itemCount: items.length,
        itemBuilder: (context, index) {
          return AnimatedStyleItem(
            index: index,
            child: Card(
              margin: const EdgeInsets.only(bottom: 12),
              child: ListTile(
                title: Text(items[index]),
                subtitle: Text('This is item number ${index + 1}'),
                trailing: const Icon(Icons.arrow_forward_ios),
                onTap: () {
                  showBaseSnackBar(
                    context,
                    message: 'Clicked on ${items[index]}',
                    type: SnackBarType.info,
                  );
                },
              ),
            ),
          );
        },
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final List<String> items = List.generate(
      20,
      (index) => 'Grid ${index + 1}',
    );

    return Scaffold(
      appBar: AppBar(
        title: const Text('Grid View'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: GridView.builder(
        padding: const EdgeInsets.all(16),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 16,
          mainAxisSpacing: 16,
          childAspectRatio: 1.0,
        ),
        itemCount: items.length,
        itemBuilder: (context, index) {
          return AnimatedGridItem(
            index: index,
            child: Card(
              elevation: 4,
              child: InkWell(
                onTap: () {
                  showBaseSnackBar(
                    context,
                    message: 'Clicked on ${items[index]}',
                    type: SnackBarType.success,
                  );
                },
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.image,
                      size: 48,
                      color: Theme.of(context).colorScheme.primary,
                    ),
                    const SizedBox(height: 8),
                    Text(
                      items[index],
                      style: Theme.of(context).textTheme.titleMedium,
                    ),
                  ],
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final List<Map<String, dynamic>> items = [
      {'type': AnimationType.fade, 'direction': SlideDirection.fromBottom, 'label': 'Fade'},
      {'type': AnimationType.slide, 'direction': SlideDirection.fromLeft, 'label': 'Slide from Left'},
      {'type': AnimationType.scale, 'direction': SlideDirection.fromBottom, 'label': 'Scale'},
      {'type': AnimationType.fadeAndSlide, 'direction': SlideDirection.fromRight, 'label': 'Fade & Slide from Right'},
      {'type': AnimationType.slide, 'direction': SlideDirection.fromTop, 'label': 'Slide from Top'},
      {'type': AnimationType.fadeAndSlide, 'direction': SlideDirection.fromBottom, 'label': 'Fade & Slide from Bottom'},
      {'type': AnimationType.rotation, 'direction': SlideDirection.fromBottom, 'label': 'Rotation'},
      {'type': AnimationType.size, 'direction': SlideDirection.fromBottom, 'label': 'Size'},
      {'type': AnimationType.flip, 'direction': SlideDirection.fromBottom, 'label': 'Flip'},
    ];

    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom Animations'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: GridView.builder(
        padding: const EdgeInsets.all(16),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 16,
          mainAxisSpacing: 16,
        ),
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item = items[index];
          return AnimatedItem(
            animationType: item['type'],
            slideDirection: item['direction'],
            child: Card(
              elevation: 4,
              child: InkWell(
                onTap: () {
                  showBaseSnackBar(
                    context,
                    message: 'Clicked on ${item['label']}',
                    type: SnackBarType.info,
                  );
                },
                child: Center(
                  child: Text(
                    item['label'],
                    textAlign: TextAlign.center,
                    style: Theme.of(context).textTheme.titleMedium,
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}