About

A polished, compact audio card with artwork, clean time readout, and essential transport controls. Tap the queue button to reveal a smooth bottom-sheet playlist with thumbnails, titles, artists, and durations. Ideal for apps that need a discreet player on the page and a full track list on demand.

Functionality

  • Compact player card with rounded corners, soft shadow, and album artwork.

  • Title + time readout (elapsed / total) for quick context at a glance.

  • Transport controls: previous, play/pause, next — sized for comfortable taps.

  • Queue button opens a modal bottom sheet playlist (drag handle, swipe to dismiss).

  • Playlist rows with artwork, title, artist, and duration; tap to play instantly.

  • Active track indicator (equalizer-style icon) for clear now-playing state.

  • Optional shuffle/repeat toggle available in the control row.

  • Smooth animations for sheet open/close and control feedback.

  • Theming: customize accent color, typography, radii, and elevations.

  • Data binding to Firestore/Supabase/REST/local JSON.

  • Responsive & accessible: readable hierarchy, generous hit areas, and dark/light support.

Great for: music apps, podcast episode lists, learning modules, and any screen that needs a minimal player with a full playlist just a tap away.

Keywords: FlutterFlow audio player, mini player, bottom sheet playlist, modal queue, now playing, play pause, previous next, queue button, active track indicator, equalizer icon, time readout, elapsed time, total duration, album artwork, compact card, rounded corners, soft shadow, clean UI, responsive layout, music app UI, podcast player, just_audio integration, audio service, Firestore binding, Supabase storage, REST datasource, shuffle, repeat, swipe to dismiss, drag handle, mobile media player, premium template, Flutter widget, FlutterFlow component, modern UX.

Mini Card Player & Bottom Sheet Playlist

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.