A simple scroll progress bar

Showcases and Presentations
1

Screenshot 2024-11-16 at 12.38.20 AM
Screenshot 2024-11-16 at 12.38.20 AM888×1738 265 KB

This is a flexible ScrollProgress widget that implements a progress bar showing
the user’s current scroll position. The widget includes 6 different pre-built styles:

  1. default_: Clean, minimal progress bar
  2. gradient: Smooth blue gradient effect
  3. rounded: Purple bar with rounded corners and subtle shadow
  4. thick: Thicker orange variant
  5. slim: Minimalist green thin line
  6. shimmer: Animated gradient effect with color transitions

All styles are customizable and the implementation uses standard Flutter widgets like Stack, FractionallySizedBox, and LinearGradient. The progress calculation is handled through a ScrollController listening to scroll events.

ScrollProgressBasic(
  style: ScrollProgressStyle.shimmer, // or any other style
)

full video: @amalchandran.bsky.social on Bluesky
full code here: flutterfx_widgets/lib/scroll-progress/scroll_progress.dart at main · flutterfx/flutterfx_widgets · GitHub

5 Likes