Dart Code for UI
Dart
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("Music Player"), ), body: Column( children: [ const Spacer( flex: 2, ), ClipRRect( borderRadius: BorderRadius.circular(8), child: Image.network( thumbnailImgUrl, height: 350, width: 350, fit: BoxFit.cover, ), ), const Spacer(), Padding( padding: const EdgeInsets.symmetric(horizontal: 8), child: StreamBuilder( stream: player.positionStream, builder: (context, snapshot1) { final Duration duration = loaded ? snapshot1.data as Duration : const Duration(seconds: 0); return StreamBuilder( stream: player.bufferedPositionStream, builder: (context, snapshot2) { final Duration bufferedDuration = loaded ? snapshot2.data as Duration : const Duration(seconds: 0); return SizedBox( height: 30, child: Padding( padding: const EdgeInsets.symmetric(horizontal: 16), child: ProgressBar( progress: duration, total: player.duration ?? const Duration(seconds: 0), buffered: bufferedDuration, timeLabelPadding: -1, timeLabelTextStyle: const TextStyle( fontSize: 14, color: Colors.black), progressBarColor: Colors.red, baseBarColor: Colors.grey[200], bufferedBarColor: Colors.grey[350], thumbColor: Colors.red, onSeek: loaded ? (duration) async { await player.seek(duration); } : null, ), ), ); }); }), ), const SizedBox( height: 8, ), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ const SizedBox( width: 10, ), IconButton( onPressed: loaded ? () async { if (player.position.inSeconds >= 10) { await player.seek(Duration( seconds: player.position.inSeconds - 10)); } else { await player.seek(const Duration(seconds: 0)); } } : null, icon: const Icon(Icons.fast_rewind_rounded)), Container( height: 50, width: 50, decoration: const BoxDecoration( shape: BoxShape.circle, color: Colors.red), child: IconButton( onPressed: loaded ? () { if (playing) { pauseMusic(); } else { playMusic(); } } : null, icon: Icon( playing ? Icons.pause : Icons.play_arrow, color: Colors.white, )), ), IconButton( onPressed: loaded ? () async { if (player.position.inSeconds + 10 <= player.duration!.inSeconds) { await player.seek(Duration( seconds: player.position.inSeconds + 10)); } else { await player.seek(const Duration(seconds: 0)); } } : null, icon: const Icon(Icons.fast_forward_rounded)), const SizedBox( width: 10, ), ], ), const Spacer( flex: 2, ) ], ), ); } |
Step 11:
The final step remaining is to update the main.dart file where the applications start running the code. Add the following dart code in the main.dart file.
Dart
import 'package:flutter/material.dart'; import 'package:music_player_gfg/player_screen.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( home: PlayerScreen(), debugShowCheckedModeBanner: false, title: "Music Player", ); } } |
Voila, your application is coded completely and ready to be built, and run.
Step 12:
Build and Run
To run your app, select Run from the toolbar and click on Run Without Debugging or CTRL + F5 then select your preferred device to test the app. You can modify the code and update the UI as per your choice.
Output
Here is the final output of the app.
How to Build Music Player Application Using Flutter?
Music can inspire and motivate us, it makes every person feel enthusiastic and relaxed. In this article, we will explain how to build a Music Player application step by step with some basic functionalities like pause, play, and seek in Flutter from a music URL. Flutter is an open-source framework developed and supported by Google to build and deploy hybrid applications easily.
Contact Us