Devlog – Building My First Flutter Package: Hourglass Widget
Devlog – Building My First Flutter Package: Hourglass Widget
One of the most satisfying moments as a developer is seeing your own work become something others can use and enjoy.
This week, I released my first ever Flutter package on pub.dev: the Hourglass Widget ⏳
🌱 How It Started
When I was developing TaskTracker, a productivity app built with Flutter, I wanted to include a small animated hourglass that visually represents time progress. I thought it would be a nice visual touch to show how much time had passed or how much was left in a task.
Naturally, I searched pub.dev for something similar. To my surprise, there wasn’t a package that provided a clean, customizable hourglass animation. Most existing widgets were static or based on images, which didn’t fit what I needed.
So, I decided to build it myself.
🛠️ The Building Process
The Hourglass Widget is built entirely using Flutter’s CustomPainter. Every curve, arc, and fill animation is drawn procedurally. No SVGs, no images — just math and paint.
This approach gave me full control over how the shape behaves and how it fills up over time. I could tweak the top and bottom chambers, control the sand fill amount, and even apply gradient colors to make it more vibrant.
The goal was simple:
-
Keep it lightweight and responsive
-
Make it look beautiful with gradients
-
Allow a smooth animated transition between empty and full states
✨ Features
Here’s what the package currently offers:
-
🎨 Customizable gradient colors and stops
-
⏱️ Animated fill amount (0.0 to 1.0)
-
📱 Responsive sizing
-
🎯 Smooth animations powered by
CustomPainter
-
🔧 Easy to integrate with just a few lines of code
You can check out the full documentation and example on:
📦 pub.dev/hourglass_widget
💻 GitHub Repository
💡 Lessons Learned
This was my first experience publishing something to pub.dev, and it taught me a lot:
-
How to properly structure a package for public use
-
The importance of clear documentation and examples
-
How rewarding it feels to contribute something back to the community
It also reminded me how much power Flutter gives us through its painting system. With just a few lines of Canvas
and Path
, you can create stunning visuals from scratch.
🚀 What’s Next
Now that the first version is out, I plan to continue improving it with:
-
Adjustable hourglass shapes (round or sharp edges)
-
Themed presets (e.g., metallic, glassy styles)
-
Built-in animation controllers for easier use
If you’d like to contribute or have suggestions, feel free to open a PR or issue on GitHub.
❤️ Final Thoughts
Publishing this package might be a small milestone, but it feels like a big personal achievement. Seeing something you built from scratch listed on pub.dev is incredibly motivating.
If you’re a Flutter developer and want to add a clean, animated hourglass effect to your app, give Hourglass Widget a try — and let me know what you think!
“Great things start small. Every open-source contribution, no matter how simple, helps someone out there build something amazing.”
Links
🔗 GitHub: https://github.com/Sewmina7/hourglass_widget
📦 Pub.dev: https://pub.dev/packages/hourglass_widget
Comments
Post a Comment