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

Popular Posts