flutter_icons_animated 1.2.0
flutter_icons_animated: ^1.2.0 copied to clipboard
Collection of 2490+ animations for your icons and buttons, including 25+ cryptocurrency icons and 12+ beautiful flower icons. They are implemented by Lottie animation. Effective icon animation tells a [...]
flutter_icons_animated #
🎨 A comprehensive collection of 2,490+ animated icons from 7 premium libraries, including 25+ cryptocurrency icons and 12+ beautiful flower icons
🚀 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
- 🪙 NEW: Cryptocurrency Icons: 25+ crypto icons including Bitcoin, Ethereum, Solana, and more
- 🌸 NEW: Flower Icons: 12+ beautiful flower and nature icons for botanical and natural themes
📦 Package Overview #
Animation always adds life to your icons. This package collects 2,490+ animated icons from 7 premium libraries, including 25+ cryptocurrency icons and 12+ beautiful flower icons. 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 |
| Crypto | 25 | Cryptocurrency animated icons (Bitcoin, Ethereum, etc.) | 🟡 Gold |
| Flowers | 12+ | Beautiful flower and nature animated icons | 🌸 Pink |
📱 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)
Crypto Library #
// Major cryptocurrencies
Lottie.asset(Crypto.bitcoin)
Lottie.asset(Crypto.ethereum)
Lottie.asset(Crypto.solana)
Lottie.asset(Crypto.bnb)
Lottie.asset(Crypto.cardano)
// Stablecoins
Lottie.asset(Crypto.tether)
Lottie.asset(Crypto.usdCoin)
// Meme coins
Lottie.asset(Crypto.shibaInu)
Lottie.asset(Crypto.doge)
// DeFi tokens
Lottie.asset(Crypto.uniswap)
Lottie.asset(Crypto.pancakeswap)
// Gaming/Metaverse
Lottie.asset(Crypto.decentraland)
Lottie.asset(Crypto.sandbox)
Lottie.asset(Crypto.gala)
Flowers Library #
// Beautiful flowers
Lottie.asset(Flowers.flower)
Lottie.asset(Flowers.pinkFlower)
Lottie.asset(Flowers.purpleFlower)
Lottie.asset(Flowers.curveFlower01)
Lottie.asset(Flowers.curveFlower02)
// Flower lines and designs
Lottie.asset(Flowers.flowerLine)
Lottie.asset(Flowers.flowerThinLine)
Lottie.asset(Flowers.curveFlowerLine)
Lottie.asset(Flowers.straightFlowerLine)
// Nature elements
Lottie.asset(Flowers.leaf)
Lottie.asset(Flowers.greenLeaves)
// Frames
Lottie.asset(Flowers.frame)
🎨 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 #
- Always dispose AnimationControllers in the dispose() method
- Use Lottie.asset() for better performance than Lottie.network()
- Provide errorBuilder to handle loading failures gracefully
- Use appropriate sizes based on your UI design
- Consider animation duration for better user experience
- 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! ⭐