flutter_icons_animated 1.0.0

Collection of 2400+ animations for your icons and buttons. They are implemented by Lottie animation. Effective icon animation tells a clear story amplifying the intended UX.

flutter_icons_animated

🎨 A comprehensive collection of 2,454+ animated icons from 5 premium libraries

🚀 What's New in This Fork

This is a forked and enhanced version of the original flutter_animated_icons package with significant improvements:

• ✅ Updated Dependencies: Latest Flutter SDK and package versions
• ✅ Fixed Asset Paths: All icons now load correctly
• ✅ Enhanced Examples: Comprehensive usage examples for all libraries
• ✅ Modern UI: Beautiful example app with search, filtering, and autoplay
• ✅ Better Documentation: Complete usage guide with code examples
• ✅ Performance Optimized: Improved loading and animation performance
• ✅ Git Integration: Proper version control and commit history

📦 Package Overview

Animation always adds life to your icons. This package collects 2,454+ animated icons from 5 premium libraries. The animated icons are implemented using Lottie animation, providing smooth, high-quality animations for your Flutter apps.

🎯 Icon Libraries

Library	Icons	Description	Color
Icons8	1,187	Professional icon library with high-quality animations	🔵 Blue
LottieFiles	756	Community-driven animations with diverse styles	🟢 Green
UseAnimations	80	Clean and modern micro-interactions	🟠 Orange
Lordicon	154	Premium animated icons with multiple styles	🟣 Purple
LottieFlow	277	Creative and artistic animations	🟦 Teal

📱 Examples

Example 1: Complete Icon Browser

A full-featured app with search, filtering, and autoplay functionality:

cd example
flutter run

Example 2: Usage Guide

Comprehensive examples showing how to use all libraries:

cd example2
flutter run

🚀 Quick Start

1. Add Dependency

dependencies:
  flutter_icons_animated:
    git:
      url: https://github.com/your-username/flutter_icons_animated.git
  lottie: ^3.3.2

2. Import Package

import 'package:flutter_icons_animated/flutter_animated_icons.dart';
import 'package:lottie/lottie.dart';

3. Basic Usage

// Simple usage
Lottie.asset(Icons8.heart_color)

// With animation controller
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> 
    with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return IconButton(
      onPressed: () {
        _controller.reset();
        _controller.forward();
      },
      icon: Lottie.asset(
        Icons8.heart_color,
        controller: _controller,
        width: 50,
        height: 50,
      ),
    );
  }
}

📚 Library Usage Examples

Icons8 Library

// Basic usage
Lottie.asset(Icons8.heart_color)
Lottie.asset(Icons8.trash)
Lottie.asset(Icons8.settings)

// With controller
Lottie.asset(
  Icons8.heart_color,
  controller: _controller,
  width: 50,
  height: 50,
)

LottieFiles Library

// Basic usage
Lottie.asset(LottieFiles.$63128_bell_icon)
Lottie.asset(LottieFiles.$33262_icons_bell_notification)

// With repeat animation
Lottie.asset(
  LottieFiles.$63128_bell_icon,
  controller: _controller,
  repeat: true,
)

UseAnimations Library

// Basic usage
Lottie.asset(Useanimations.menuV3)
Lottie.asset(Useanimations.activity)

// Different colors
Lottie.asset(Useanimations.menuV3Blue)  // Blue version
Lottie.asset(Useanimations.menuV3)      // Default version

Lordicon Library

// Basic usage
Lottie.asset(Lordicon.$1_share_outline)
Lottie.asset(Lordicon.$2_heart_solid)

// Different styles
Lottie.asset(Lordicon.$1_share_solid)   // Solid version
Lottie.asset(Lordicon.$1_share_outline) // Outline version

LottieFlow Library

// Basic usage
Lottie.asset(LottieFlow.lottieflow_404_12_1_000000_easey)
Lottie.asset(LottieFlow.lottieflow_arrow_03_1_000000_easey)

// Background animations
Lottie.asset(LottieFlow.lottieflow_background_13_000000_easey)

🎨 Advanced Usage

Custom Animation Controller

class AnimatedIconWidget extends StatefulWidget {
  final String iconPath;
  
  const AnimatedIconWidget({Key? key, required this.iconPath}) : super(key: key);

  @override
  _AnimatedIconWidgetState createState() => _AnimatedIconWidgetState();
}

class _AnimatedIconWidgetState extends State<AnimatedIconWidget>
    with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(milliseconds: 1500),
      vsync: this,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (_controller.isAnimating) {
          _controller.stop();
        } else {
          _controller.repeat();
        }
      },
      child: Lottie.asset(
        widget.iconPath,
        controller: _controller,
        width: 60,
        height: 60,
        fit: BoxFit.contain,
        errorBuilder: (context, error, stackTrace) {
          return Icon(Icons.error_outline, color: Colors.grey);
        },
      ),
    );
  }
}

Error Handling

Lottie.asset(
  Icons8.heart_color,
  controller: _controller,
  errorBuilder: (context, error, stackTrace) {
    return Icon(Icons.error_outline, color: Colors.grey);
  },
)

💡 Best Practices

1. Always dispose AnimationControllers in the dispose() method
2. Use Lottie.asset() for better performance than Lottie.network()
3. Provide errorBuilder to handle loading failures gracefully
4. Use appropriate sizes based on your UI design
5. Consider animation duration for better user experience
6. Test on different devices to ensure smooth performance

🔧 Troubleshooting

Icons not loading?

• Make sure you've added the package dependency correctly
• Check that the asset paths are correct
• Verify that the Lottie package is included

Animation not working?

• Ensure you have an AnimationController
• Check that the controller is properly initialized
• Make sure to call controller.forward() or controller.repeat()

Performance issues?

• Use Lottie.asset() instead of Lottie.network()
• Dispose AnimationControllers properly
• Consider using smaller icon sizes for better performance

📄 License

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

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

⭐ Star History

If you find this package useful, please give it a star! ⭐

---

Made with ❤️ for the Flutter community