DEV Community

Walid
Walid

Posted on

πŸš€ A Flutter Progress Bar That Shimmers β€” shimmer_progress_bar is Here!

Progress indicators don’t have to be boring. So I built shimmer_progress_bar β€” a customizable, animated progress bar widget for Flutter with built-in shimmer effects, smooth transitions, and optional percentage labels.

Whether you’re tracking donation goals, file uploads, onboarding steps, or in-app achievements, this widget makes your UI shine ✨

shimmer_progress_bar on Android

Image description

βΈ»

βœ… Features

  • Smooth animated progress fill
  • Optional shimmer effect
  • Percentage display (centered or tip-aligned)
  • Fully customizable (colors, radius, height, fonts)
  • Accessibility-ready
  • Progress completion callback

βΈ»

πŸ§ͺ Quick Example

ShimmerProgressBar(
  value: 0.75,
  height: 18.0,
  valueColor: Colors.green,
  showShimmer: true,
  showPercentage: true,
  onProgressComplete: () => print('Done!'),
)
Enter fullscreen mode Exit fullscreen mode

βΈ»

🎯 Use Cases

  • 🎁 In-app achievements / level tracking
  • πŸ“¦ Upload/download progress
  • πŸ“Š Fundraising or goal meters
  • 🧭 Onboarding flows
  • πŸƒ Fitness / daily goals

βΈ»

πŸ“š Full Guide
I wrote a detailed Medium article that breaks down how it works, how to customize it, and where it can fit into your Flutter projects.

βΈ»

πŸ› οΈ Contribute or Support

Tests are in progress (pun intended πŸ˜„), and I’m always open to pull requests. If you’d like to help add tests, improve performance, or explore new features β€” check out the GitHub repo!

And if this widget saved you time or you just enjoy polished UI tools:

πŸ‘‰ Buy Me a Coffee
πŸ‘‰ Sponsor on GitHub

βΈ»

πŸ“¦ Get Started

dependencies:
  shimmer_progress_bar: ^1.0.0
Enter fullscreen mode Exit fullscreen mode

Thanks for checking it out! I’d love your feedback β€” and feel free to share how you use it in your apps.

Top comments (0)