circular-progress-audio-player
flutterflow-circular-progress-player
About

A stylish circular progress audio player that wraps your artwork with a ring-style timeline β€” a slim track 🧡, a tiny head indicator πŸ”Ή, and a clean gap βž– for a premium, modern look. It’s lightweight, buttery-smooth, and effortlessly themeable 🎨, perfect for feeds, cards, or full-screen layouts in FlutterFlow.

Functionality βš™οΈ

  • πŸ–ΌοΈ Circular cover artwork with crisp masking + optional shadow.

  • πŸ”„ Ring progress track around the image with a subtle start/end gap.

  • πŸ”Ή Live position dot that advances smoothly during playback.

  • πŸ“ Deterministic progress (bind to current position / duration).

  • πŸ‘† Seek on ring (optional): tap/drag the arc to jump within the track.

  • πŸ“ Configurable sizes: widget diameter, ring thickness, inner padding.

  • 🎨 Accent theming: ring color/gradient, inactive track, cap style (round/square).

  • 🧭 States: idle πŸ’€, playing ▢️, paused ⏸️, buffering ⏳, completed βœ….

  • 🧩 Callbacks: onStart, onSeek, onComplete β†’ next-track or UI updates.

  • πŸ”Œ Data-ready: connects to just_audio or FlutterFlow audio actions.

  • πŸŒ— Dark/Light ready with high-contrast indicator and accessible ring.

  • ⚑ 60fps animations: minimal rebuilds, fluid progress.

  • 🧰 Versatile use: audio progress, story timer, voice-note timer.

Perfect for πŸ’‘

Compact music players 🎡, podcast avatars πŸŽ™οΈ, story timers ⏰, voice messages πŸ—£οΈ β€” any UI that needs a premium circular progress around an image.

Keywords πŸ”Ž

FlutterFlow circular player, ring seekbar, radial progress, circular progress bar, album art ring, cover artwork progress, arc slider, progress indicator, audio position, seek on ring, playback progress, animated dot, gradient ring, minimal player, compact UI, podcast avatar, story timer, voice message timer, just_audio integration, audio service, Flutter widget, mobile media player, light theme, dark theme, rounded artwork, smooth animation, premium template, responsive design, accent color, gap track, cap style, FlutterFlow component.

Circular Progress Player

We’ll build your app in 7 days
Features
Categories
Style
Support
Single Use Individual License

You may only use this template for one project. For more details, please read the Marketplace Terms of Service.