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)