How to Set Up a Music Streaming Service with FlutterFlow

Create a tracks collection with fields: title (String), artist (String), albumArt (String — image URL), audioUrl (String — MP3/AAC URL in Firebase Storage or external CDN), duration (Integer — seconds), genre (String — Pop, Rock, Electronic, Jazz, Hip-Hop), and album (String). Create a playlists collection: userId (String), name (String), description (String), trackIds (List of Strings — references to track document IDs), coverArt (String — first track's albumArt or custom image), and createdAt (Timestamp). Upload 8-10 test audio files to Firebase Storage and create corresponding track documents with real audio URLs. Set Firestore rules: tracks are public read; playlists are read/write only by owner.

Create a BrowsePage with a Column inside a SingleChildScrollView. For each genre, add a section: a Row with a Text heading (genre name in headlineSmall bold) and a 'See All' TextButton. Below it, place a horizontal ListView (scrollDirection: horizontal, height: 180) bound to a Backend Query on tracks where genre == 'Pop' (repeat for each genre). Each item is a Container (width: 140) with a Column: ClipRRect Image (albumArt, square, borderRadius: 8), Text (title, maxLines: 1, overflow: ellipsis), and Text (artist, caption, secondary color). On Tap, set App State currentTrack to this track's data and start playback (trigger the global player). Alternatively, navigate to a NowPlayingPage for full-screen controls.

Create a Custom Widget named AudioPlayerWidget that imports the just_audio package. The widget accepts parameters: audioUrl (String), title (String), artist (String), albumArt (String), and Action Parameter callbacks onNext and onPrevious. Inside the widget, create an AudioPlayer instance. On init, call player.setUrl(audioUrl). Build the UI: a large Image for album art, Text for title and artist, a Slider bound to player.positionStream (current position / duration), a Row with IconButton skip_previous (calls onPrevious), IconButton play_arrow/pause (toggles player.play/pause based on player.playerState), and IconButton skip_next (calls onNext). Display current time and remaining time as Text widgets formatted from position and duration streams.

1// Custom Widget: AudioPlayerWidget (core playback logic)
2import 'package:just_audio/just_audio.dart';
3
4final _player = AudioPlayer();
5
6@override
7void initState() {
8  super.initState();
9  _player.setUrl(widget.audioUrl);
10}
11
12// Play/Pause toggle
13StreamBuilder<PlayerState>(
14  stream: _player.playerStateStream,
15  builder: (context, snapshot) {
16    final playing = snapshot.data?.playing ?? false;
17    return IconButton(
18      iconSize: 64,
19      icon: Icon(playing ? Icons.pause_circle_filled : Icons.play_circle_filled),
20      onPressed: () => playing ? _player.pause() : _player.play(),
21    );
22  },
23),
24// Seek slider
25StreamBuilder<Duration>(
26  stream: _player.positionStream,
27  builder: (context, snapshot) {
28    final position = snapshot.data ?? Duration.zero;
29    final duration = _player.duration ?? Duration.zero;
30    return Slider(
31      value: position.inMilliseconds.toDouble(),
32      max: duration.inMilliseconds.toDouble(),
33      onChanged: (v) => _player.seek(Duration(milliseconds: v.toInt())),
34    );
35  },
36)

The mini-player must persist across page navigation. In App State, create variables: currentTrackTitle (String), currentTrackArtist (String), currentTrackAudioUrl (String), currentTrackAlbumArt (String), and isPlaying (Boolean). In your app's main scaffold (the root page or NavBar page), wrap the body in a Stack. The bottom layer is the normal page content (via NavBar or page router). On top, add a Positioned widget pinned to the bottom (above the NavBar if present) containing a MiniPlayer Component: a Container (height: 64, with shadow) showing a Row of Image (albumArt, 48x48), Column (title + artist, truncated), and play/pause IconButton. The MiniPlayer reads from App State and controls playback via a global AudioPlayer singleton managed in a Custom Action. Tapping the mini-player navigates to NowPlayingPage.

Create a PlaylistsPage with a ListView of the user's playlists (query: playlists where userId == currentUser.uid). Each item shows coverArt, name, track count (trackIds.length), and a play button. Add a FAB to create a new playlist: BottomSheet with TextField for name → Create Document in playlists with empty trackIds array. On any track in the browse page or now playing screen, add a long-press action that shows a BottomSheet listing the user's playlists with an 'Add to Playlist' button for each. The action updates the playlist document by appending the track ID to trackIds using FieldValue.arrayUnion. Viewing a playlist: navigate to PlaylistDetailPage showing all tracks (query: tracks whereIn trackIds) in a ListView. Remove track: swipe-to-dismiss or long-press → FieldValue.arrayRemove.