Throwback to Flutter Counter Challenge 2020
and introducing the animated_counter package
It all began in early December 2020 when a few enthusiastic….or you can say bored developers started a challenge, called the #FlutterCounterChallenge2020 to see who could make the best animations on Flutter.
It is not known who exactly started it, but what is sure is that it shot up very quickly. In a matter of months hundreds of developers started posting their own counter animations with the above hashtag on almost all major social networking sites. From Twitter to LinkedIn, nothing was spared.
I too tried this challenge and made some cool custom animations, but they were nothing when compared to the top developers out there. This challenge reminded me of the Flutter Clock challenge which took place in early January 2020. That time too, thousands of developers took part in a massive contest to make the best animated clock widget. The only difference between these two challenges were that the Clock challenge had a monetary prize whereas the Counter challenge had none. It was for pure fun, nothing else.
Today, more than 2 months have passed since the challenge’s inception and there are many custom counters out there whose code you can find on GitHub.
I have tried my best to bring many of those widgets to a single package to be used by Flutter developers around the globe.
The package has 12 custom animated counters at present:
- Blocks Counter
- Circle Wave Counter
- Creature Counter
- Image Bubble Counter
- Particles Counter
- Portrait Counter
7. Rotating Bubbles Counter
8. Rotating Planets Counter
9. Volcano Counter
10. Wave Counter
11. Pixel Counter
12. Disks Counter
All the animated counters are beautiful and fully customizable.
Steps to add these awesome counter animations in your app:
- Create an object of the desired animated counter by passing the required parameters in its constructors such as the values of
initialCounter,initialColors,images, andvsync.
2. Call their .build() function in the widget tree where you want to add the counter passing the present context as an argument.
3. To control the counters use their .incrementCounter() ,.decrementCounter() and .getCounter()functions.
You can find more in-depth details and how to use these Animated Counters at: https://pub.dev/packages/animated_counter
🐲Animated Counter is supported across all the Flutter platforms including:
- Flutter Android 📱
- Flutter iOS 📱
- Flutter web 💻
- Flutter desktop 💻
🐱🏍This package was made possible with the code open-sourced by these awesome Flutter Heroes:
🐱💻You can watch the live preview here:
Note that this page is built with flutter-web, hence the animations may not be smooth. For a better user experience, please run the example app on a mobile device.
Please do share this package with others, and if you too have developed a custom animated counter, you can add it to this package with a pull request.
I’ll be more than happy to add it to this package: https://github.com/RyuuKenshi/flutter_animated_counter
✨If you liked Animated Counter, I would highly appreciate it if you could give it a like on pub.dev and a star on GitHub. It would motivate me to keep making awesome packages like this one for everyone to use.🌟
