Audio Video Progress Bar In Flutter
In this blog, we learn about how to implement Audio Video Progress Bar In Flutter.
We can use this widget to display the current progress of a music or video player. This widget is easier to link to a media player compared to the Flutter Slider widget.
Moreover, it allows streaming media to display the buffered state.
Introduction:-
The video progress bar is a convenient tool that helps you keep track of where you stopped watching a video last time.
When you exit a video without finishing it, a bar located under the video thumbnail displays the exact moment where you paused. The next time you play the video, it will start from where you left off.
Implementation:-
First, we need to create a new Flutter project and add the following dependencies to the pubspec.yaml file.
dependencies:
flutter
sdk: flutter
audio_video_progress_bar: ^1.0.1
Now, run the command "flutter pub get" to add the dependencies.
Add the following package to your class.
import 'package:audio_video_progress_bar/audio_video_progress_bar.dart';
You may also check our flutter app development company page.
Create Progress Bar :-
To create progress bars for audio and video, you can use the ProgressBar widget.
ProgressBar(
progress: Duration(milliseconds: 1000),
buffered: Duration(milliseconds: 2000),
total: Duration(milliseconds: 5000),
onSeek: (duration) {
print('User selected a new time: $duration');
},
),
This is a static instance.
Now create a progress bar with an audio url:-
Add the following dependencies to the pubspec.yaml file.
dependencies:
flutter
sdk: flutter
audio_video_progress_bar: ^1.0.1
just_audio: ^0.9.32
Add the following package to your class.
import 'package:just_audio/just_audio.dart';
Create a DurationState class and wrap it in a builder widget updated by audio or video player.
class DurationState {
const DurationState({this.progress, this.buffered, this.total});
final Duration ? progress;
final Duration ? buffered;
final Duration ? total;
}
...
StreamBuilder<DurationState> _progressBar() {
return StreamBuilder<DurationState>(
stream: _durationState,
builder: (context, snapshot) {
final durationState = snapshot.data;
final progress = durationState?.progress ?? Duration.zero;
final buffered = durationState?.buffered ?? Duration.zero;
final total = durationState?.total ?? Duration.zero;
return ProgressBar(
progress: progress,
buffered: buffered,
total: total,
onSeek: (duration) {
_player.seek(duration);
},
onDragUpdate: (details) {
debugPrint('${details.timeStamp}, ${details.localPosition}');
},
);
},
);
}
Create Play Button:-
StreamBuilder<PlayerState> _playButton() {
return StreamBuilder<PlayerState>(
stream: _player.playerStateStream,
builder: (context, snapshot) {
final playerState = snapshot.data;
final processingState = playerState?.processingState;
final playing = playerState?.playing;
if (processingState == ProcessingState.loading ||
processingState == ProcessingState.buffering) {
return Container(
margin: const EdgeInsets.all(8.0),
width: 32.0,
height: 32.0,
child: const CircularProgressIndicator(),
);
} else if (playing != true) {
return IconButton(
icon: const Icon(Icons.play_arrow),
iconSize: 32.0,
onPressed: _player.play,
);
} else if (processingState != ProcessingState.completed) {
return IconButton(
icon: const Icon(Icons.pause),
iconSize: 32.0,
onPressed: _player.pause,
);
} else {
return IconButton(
icon: const Icon(Icons.replay),
iconSize: 32.0,
onPressed: () => _player.seek(Duration.zero),
);
}
},
);
}
complete code:-
import 'package:audio_video_progress_bar/audio_video_progress_bar.dart';
import 'package:flutter/material.dart';
import 'package:just_audio/just_audio.dart';
import 'package:rxdart/rxdart.dart';
class AudioVideoProgressBar extends StatefulWidget {
const AudioVideoProgressBar({Key? key}) : super(key: key);
@override
State<AudioVideoProgressBar> createState() => _AudioVideoProgressBarState();
}
class _AudioVideoProgressBarState extends State<AudioVideoProgressBar> {
AudioPlayer player=AudioPlayer();
final url = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3';
late Stream<DurationState> durationState;
@override
void initState() {
super.initState();
player = AudioPlayer();
durationState = Rx.combineLatest2<Duration, PlaybackEvent, DurationState>(
player.positionStream,
player.playbackEventStream,
(position, playbackEvent) => DurationState(
progress: position,
buffered: playbackEvent.bufferedPosition,
total: playbackEvent.duration,
));
_init();
}
Future<void> _init() async {
try {
await player.setUrl(url);
} catch (e) {
debugPrint('An error occurred $e');
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text("Audio Video Progress Bar"),),
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
ProgressBar(
progress: const Duration(milliseconds: 1000),
buffered: const Duration(milliseconds: 2000),
total: const Duration(milliseconds: 5000),
onSeek: (duration) {
print('User selected a new time: $duration');
},
),
const SizedBox(height: 20),
Container(
child: _progressBar(),
),
const SizedBox(height: 10),
_playButton(),
],
),
),
),
),
);
}
StreamBuilder<DurationState> _progressBar() {
return StreamBuilder<DurationState>(
stream: durationState,
builder: (context, snapshot) {
final durationState = snapshot.data;
final progress = durationState?.progress ?? Duration.zero;
final buffered = durationState?.buffered ?? Duration.zero;
final total = durationState?.total ?? Duration.zero;
return ProgressBar(
progress: progress,
buffered: buffered,
total: total,
onSeek: (duration) {
player.seek(duration);
},
onDragUpdate: (details) {
debugPrint('${details.timeStamp}, ${details.localPosition}');
},
);
},
);
}
StreamBuilder<PlayerState> _playButton() {
return StreamBuilder<PlayerState>(
stream: player.playerStateStream,
builder: (context, snapshot) {
final playerState = snapshot.data;
final processingState = playerState?.processingState;
final playing = playerState?.playing;
if (processingState == ProcessingState.loading ||
processingState == ProcessingState.buffering) {
return Container(
margin: const EdgeInsets.all(8.0),
width: 32.0,
height: 32.0,
child: const CircularProgressIndicator(),
);
} else if (playing != true) {
return IconButton(
icon: const Icon(Icons.play_arrow),
iconSize: 32.0,
onPressed: player.play,
);
} else if (processingState != ProcessingState.completed) {
return IconButton(
icon: const Icon(Icons.pause),
iconSize: 32.0,
onPressed: player.pause,
);
} else {
return IconButton(
icon: const Icon(Icons.replay),
iconSize: 32.0,
onPressed: () => player.seek(Duration.zero),
);
}
},
);
}
}
class DurationState {
const DurationState({this.progress, this.buffered, this.total});
final Duration ? progress;
final Duration ? buffered;
final Duration ? total;
}
Output:-
As shown in the video below, the progress bar moves when the audio plays and stops when it is paused.
Conclusion:-
We have completed the implementation of our topic.
Check here for more interesting blogs –https://mobikul.com/blog/.
After reading this blog, you should have a better understanding of how to implement an audio and video progress bar in Flutter.
Flutter’s official website offers useful resources for exploring Audio, Video, and Progress bar.
Webkul is a full‑stack Flutter app development company, specializing in interactive and media‑rich mobile experiences, like their blog demo showing how to build a customizable audio/video progress bar in Flutter.
Thank you for taking the time to read this blog post🙂.