Flutter music player app tutorial

Creating a Flutter music player app tutorial with Audio Playback and Carousel Slider: A Detailed Tutorial

In this tutorial, we’ll guide you through building a Flutter music player app using the audioplayers and carousel_slider packages. This app will play music tracks, display cover art, and include features like play, pause, next, and previous functionality. Let’s dive into the details!

Prerequisites

To get started, ensure you have Flutter installed and a basic understanding of Dart. Add the following dependencies in your pubspec.yaml file:

dependencies:  
  flutter:  
    sdk: flutter  
  audioplayers: ^0.20.1  
  carousel_slider: ^4.1.1

Run flutter pub get to install the packages.

App Overview

We’ll create:

A music list with URLs.
Cover art for each track.
A carousel slider for artwork.
Audio control buttons (play, pause, next, previous).

Step 1: Setting Up the Main App Structure

Here’s the main entry point for our app:

import 'package:audioplayers/audioplayers.dart';  
import 'package:carousel_slider/carousel_slider.dart';  
import 'package:flutter/material.dart';  

void main() {  
  runApp(const MyApp());  
}  

class MyApp extends StatelessWidget {  
  const MyApp({super.key});  

  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: 'Flutter Music Player',  
      theme: ThemeData(  
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),  
        useMaterial3: true,  
      ),  
      home: MusicPlayerApp(),  
    );  
  }  
}

Step 2: Creating the Music List and UI

This MusicPlayerApp displays a list of tracks:

class MusicPlayerApp extends StatelessWidget {  
  final List<String> _musicList = [  
    "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",  
    "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",  
    "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3",  
  ];  

  final List<String> _coverArtList = [  
    "https://cdn.pixabay.com/photo/2020/05/19/13/48/cartoon-5190942_960_720.jpg",  
    "https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_960_720.jpg",  
    "https://cdn.pixabay.com/photo/2020/10/23/17/52/fox-5679446_960_720.png",  
  ];  

  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      body: ListView.builder(  
        itemCount: _musicList.length,  
        itemBuilder: (context, index) {  
          return Card(  
            child: ListTile(  
              leading: Image.network(_coverArtList[index]),  
              title: Text('Track ${index + 1}'),  
              onTap: () {  
                Navigator.push(  
                  context,  
                  MaterialPageRoute(  
                    builder: (context) => MusicPlayerScreen(  
                      musicList: _musicList,  
                      coverArtistList: _coverArtList,  
                      initialIndex: index,  
                    ),  
                  ),  
                );  
              },  
            ),  
          );  
        },  
      ),  
    );  
  }  
}

Step 3: Building the Music Player Screen

Here’s the MusicPlayerScreen widget that plays the selected track:

class MusicPlayerScreen extends StatefulWidget {  
  final List<String> musicList;  
  final List<String> coverArtistList;  
  final int initialIndex;  

  const MusicPlayerScreen({  
    super.key,  
    required this.musicList,  
    required this.coverArtistList,  
    required this.initialIndex,  
  });  

  @override  
  _MusicPlayerScreenState createState() => _MusicPlayerScreenState();  
}  

class _MusicPlayerScreenState extends State<MusicPlayerScreen> {  
  late AudioPlayer _audioPlayer;  
  bool _isPlaying = false;  

  @override  
  void initState() {  
    super.initState();  
    _audioPlayer = AudioPlayer();  
    _play(widget.musicList[widget.initialIndex]);  
  }  

  void _play(String url) async {  
    await _audioPlayer.play(UrlSource(url));  
    setState(() { _isPlaying = true; });  
  }  

  void _pause() async {  
    await _audioPlayer.pause();  
    setState(() { _isPlaying = false; });  
  }  

  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      body: Center(  
        child: Column(  
          mainAxisAlignment: MainAxisAlignment.center,  
          children: [  
            Text('Now Playing'),  
            IconButton(  
              icon: Icon(_isPlaying ? Icons.pause : Icons.play_arrow),  
              onPressed: _isPlaying ? _pause : () => _play(widget.musicList[0]),  
            ),  
          ],  
        ),  
      ),  
    );  
  }  
}

Key Features Explained

Audio Playback: audioplayers handles playing, pausing, and stopping audio tracks.
Carousel Slider: Displays cover art with smooth transitions.
UI Customization: Cards for track selection with cover images.

Conclusion

This Flutter Music Player App Tutorial guides you through creating a sleek, interactive music player with smooth audio control and cover art display. Experiment with styles and features to enhance your app further.

Explore Other Flutter Topics…

Tagged Audio player Flutter example code, Build music player in Flutter, Flutter audio player example, Flutter audio streaming tutorial, Flutter audioplayers package, Flutter carousel slider integration, Flutter media player app, Flutter music player app tutorial, How to play audio in Flutter, Music player UI Flutter