flutter_morphing_icons

A Flutter package that provides smooth icon morphing animations between different states with customizable transitions and easing curves.

Features

• 🎨 Smooth Animations: Beautiful morphing transitions between icon states
• 🔧 Customizable: Multiple animation types and configurable parameters
• 🎯 Easy to Use: Simple API with intuitive controls
• 📱 Responsive: Works seamlessly across different screen sizes
• ⚡ Performance: Optimized animations with minimal overhead
• 🎭 Flexible: Support for icons, custom widgets, and any visual elements

Getting Started

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_morphing_icons: ^0.0.1

Basic Usage

import 'package:flutter_morphing_icons/flutter_morphing_icons.dart';

// Simple morphing between icons
MorphingIcon.icons(
  icons: [Icons.favorite_border, Icons.favorite],
  size: 32,
  color: Colors.red,
  onStateChanged: (state) {
    print('Current state: $state');
  },
)

Advanced Usage

// Custom animation configuration
MorphingIcon(
  states: [
    Icon(Icons.play_arrow, size: 32, color: Colors.green),
    Icon(Icons.pause, size: 32, color: Colors.orange),
    Icon(Icons.stop, size: 32, color: Colors.red),
  ],
  config: MorphingAnimationConfig.scale(
    duration: Duration(milliseconds: 500),
    curve: Curves.elasticOut,
    scaleFactor: 1.5,
  ),
  onAnimationComplete: () {
    print('Animation completed!');
  },
)

Animation Types

1. Cross Fade (Default)

Smooth fade transition between states.

MorphingAnimationConfig.crossFade(
  duration: Duration(milliseconds: 300),
  curve: Curves.easeInOut,
)

2. Scale

Scale and fade animation with customizable scale factor.

MorphingAnimationConfig.scale(
  duration: Duration(milliseconds: 400),
  curve: Curves.bounceOut,
  scaleFactor: 1.3,
)

3. Slide

Slide transition with customizable offset.

MorphingAnimationConfig.slide(
  duration: Duration(milliseconds: 350),
  curve: Curves.easeInOut,
  slideOffset: Offset(0, -30),
)

4. Rotate

Rotation animation with customizable angle.

MorphingAnimationConfig.rotate(
  duration: Duration(milliseconds: 600),
  curve: Curves.elasticOut,
  rotationAngle: 0.8,
)

5. Custom

Define your own animation logic.

MorphingAnimationConfig.custom(
  duration: Duration(milliseconds: 800),
  curve: Curves.easeInOut,
  builder: (child, animation) {
    return Transform.scale(
      scale: animation.value,
      child: Transform.rotate(
        angle: animation.value * 2 * 3.14159,
        child: child,
      ),
    );
  },
)

API Reference

MorphingIcon

The main widget for creating morphing icon animations.

Constructor

MorphingIcon({
  Key? key,
  required List<Widget> states,
  MorphingAnimationConfig? config,
  int initialState = 0,
  double? size,
  Color? color,
  bool autoAnimate = true,
  void Function(int state)? onStateChanged,
  VoidCallback? onAnimationComplete,
})

Named Constructor

MorphingIcon.icons({
  Key? key,
  required List<IconData> icons,
  MorphingAnimationConfig? config,
  int initialState = 0,
  double? size,
  Color? color,
  bool autoAnimate = true,
  void Function(int state)? onStateChanged,
  VoidCallback? onAnimationComplete,
})

MorphingIconController

Controller for programmatically managing icon state transitions.

final controller = MorphingIconController(
  states: [icon1, icon2, icon3],
  vsync: this,
  config: MorphingAnimationConfig.crossFade(),
);

// Control methods
controller.next();           // Go to next state
controller.previous();       // Go to previous state
controller.goTo(2);         // Go to specific state
controller.toggle();        // Toggle between two states
controller.goToFirst();     // Go to first state
controller.goToLast();      // Go to last state

Examples

Play/Pause Button

class PlayPauseButton extends StatefulWidget {
  @override
  _PlayPauseButtonState createState() => _PlayPauseButtonState();
}

class _PlayPauseButtonState extends State<PlayPauseButton> {
  bool isPlaying = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          isPlaying = !isPlaying;
        });
      },
      child: MorphingIcon.icons(
        icons: [Icons.play_arrow, Icons.pause],
        initialState: isPlaying ? 1 : 0,
        size: 48,
        color: Colors.blue,
        config: MorphingAnimationConfig.scale(
          scaleFactor: 1.2,
          curve: Curves.elasticOut,
        ),
      ),
    );
  }
}

Loading States

MorphingIcon.icons(
  icons: [
    Icons.hourglass_empty,
    Icons.hourglass_bottom,
    Icons.hourglass_full,
  ],
  config: MorphingAnimationConfig.rotate(
    duration: Duration(milliseconds: 1000),
    curve: Curves.linear,
  ),
  onAnimationComplete: () {
    // Cycle through states continuously
    // Implementation depends on your use case
  },
)

Custom Widget States

MorphingIcon(
  states: [
    Container(
      width: 32,
      height: 32,
      decoration: BoxDecoration(
        color: Colors.green,
        shape: BoxShape.circle,
      ),
      child: Icon(Icons.check, color: Colors.white, size: 20),
    ),
    Container(
      width: 32,
      height: 32,
      decoration: BoxDecoration(
        color: Colors.red,
        shape: BoxShape.circle,
      ),
      child: Icon(Icons.close, color: Colors.white, size: 20),
    ),
  ],
  config: MorphingAnimationConfig.slide(
    slideOffset: Offset(20, 0),
  ),
)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have questions, please:

1. Check the documentation
2. Search existing issues
3. Create a new issue if your problem isn't already addressed

Changelog

See CHANGELOG.md for a list of changes and version history.