{"id":377047,"date":"2023-04-26T12:35:40","date_gmt":"2023-04-26T12:35:40","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=377047"},"modified":"2025-07-11T12:30:18","modified_gmt":"2025-07-11T12:30:18","slug":"audio-video-progress-bar-in-flutter","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/audio-video-progress-bar-in-flutter\/","title":{"rendered":"Audio Video Progress Bar\u00a0 In Flutter"},"content":{"rendered":"\n

In this blog, we learn about how to implement Audio Video Progress Bar  In Flutter.<\/p>\n\n\n\n

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. <\/p>\n\n\n\n

Moreover, it allows streaming media to display the buffered state.<\/p>\n\n\n\n

Introduction<\/strong>:-<\/h3>\n\n\n\n

The video progress bar is a convenient tool that helps you keep track of where you stopped watching a video last time.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Implementation:-<\/h3>\n\n\n\n

First, we need to create a new Flutter project and add the following dependencies to the pubspec.yaml file.<\/p>\n\n\n\n

dependencies:\n  flutter\n    sdk: flutter\naudio_video_progress_bar: ^1.0.1\n\nNow, run the command \"flutter pub get\" to add the dependencies.<\/pre>\n\n\n\n
Add the following package to your class.<\/p>\n\n\n\n
import 'package:audio_video_progress_bar\/audio_video_progress_bar.dart';<\/pre>\n\n\n\n
You may also check our flutter app development<\/a> company page.<\/p>\n\n\n\n
Create Progress Bar<\/strong> :-<\/h3>\n\n\n\n
To create progress bars for audio and video, you can use the ProgressBar widget.<\/p>\n\n\n\n
ProgressBar(\n  progress: Duration(milliseconds: 1000),\n  buffered: Duration(milliseconds: 2000),\n  total: Duration(milliseconds: 5000),\n  onSeek: (duration) {\n    print('User selected a new time: $duration');\n  },\n),<\/pre>\n\n\n\n
This is a static instance.<\/p>\n\n\n\n
Now create a progress bar with an audio url<\/strong>:-<\/h3>\n\n\n\n
Add the following dependencies to the pubspec.yaml file.<\/p>\n\n\n\n
dependencies:\n  flutter\n    sdk: flutter\naudio_video_progress_bar: ^1.0.1\njust_audio: ^0.9.32<\/pre>\n\n\n\n
Add the following package to your class.<\/p>\n\n\n\n
import 'package:just_audio\/just_audio.dart';<\/pre>\n\n\n\n
Create a DurationState class and wrap it in a builder widget updated by audio or video player.<\/p>\n\n\n\n
class DurationState {\n  const DurationState({this.progress, this.buffered, this.total});\n  final Duration ? progress;\n  final Duration ?  buffered;\n  final Duration ? total;\n}\n...\nStreamBuilder<DurationState> _progressBar() {\n  return StreamBuilder<DurationState>(\n    stream: _durationState,\n    builder: (context, snapshot) {\n      final durationState = snapshot.data;\n      final progress = durationState?.progress ?? Duration.zero<\/em>;\n      final buffered = durationState?.buffered ?? Duration.zero<\/em>;\n      final total = durationState?.total ?? Duration.zero<\/em>;\n      return ProgressBar(\n        progress: progress,\n        buffered: buffered,\n        total: total,\n        onSeek: (duration) {\n          _player.seek(duration);\n        },\n        onDragUpdate: (details) {\n          debugPrint('${details.timeStamp}, ${details.localPosition}');\n        },\n      );\n    },\n  );\n}\n<\/pre>\n\n\n\n
Create  Play Button:-<\/strong><\/h4>\n\n\n\n
StreamBuilder<PlayerState> _playButton() {\n    return StreamBuilder<PlayerState>(\n      stream: _player.playerStateStream,\n      builder: (context, snapshot) {\n        final playerState = snapshot.data;\n        final processingState = playerState?.processingState;\n        final playing = playerState?.playing;\n        if (processingState == ProcessingState.loading ||\n            processingState == ProcessingState.buffering) {\n          return Container(\n            margin: const EdgeInsets.all(8.0),\n            width: 32.0,\n            height: 32.0,\n            child: const CircularProgressIndicator(),\n          );\n        } else if (playing != true) {\n          return IconButton(\n            icon: const Icon(Icons.play_arrow),\n            iconSize: 32.0,\n            onPressed: _player.play,\n          );\n        } else if (processingState != ProcessingState.completed) {\n          return IconButton(\n            icon: const Icon(Icons.pause),\n            iconSize: 32.0,\n            onPressed: _player.pause,\n          );\n        } else {\n          return IconButton(\n            icon: const Icon(Icons.replay),\n            iconSize: 32.0,\n            onPressed: () => _player.seek(Duration.zero),\n          );\n        }\n      },\n    );\n  }<\/pre>\n\n\n\n
complete code:-<\/h3>\n\n\n\n
import 'package:audio_video_progress_bar\/audio_video_progress_bar.dart';\nimport 'package:flutter\/material.dart';\nimport 'package:just_audio\/just_audio.dart';\nimport 'package:rxdart\/rxdart.dart';\n\nclass AudioVideoProgressBar extends StatefulWidget {\n  const AudioVideoProgressBar({Key? key}) : super(key: key);\n\n  @override\n  State<AudioVideoProgressBar> createState() => _AudioVideoProgressBarState();\n}\n\nclass _AudioVideoProgressBarState extends State<AudioVideoProgressBar> {\n   AudioPlayer player=AudioPlayer();\n   final url = 'https:\/\/www.soundhelix.com\/examples\/mp3\/SoundHelix-Song-2.mp3';\n   late Stream<DurationState> durationState;\n@override\nvoid initState() {\n  super.initState();\n  player = AudioPlayer();\n  durationState = Rx.combineLatest2<Duration, PlaybackEvent, DurationState>(\n      player.positionStream,\n      player.playbackEventStream,\n          (position, playbackEvent) => DurationState(\n        progress: position,\n        buffered: playbackEvent.bufferedPosition,\n        total: playbackEvent.duration,\n      ));\n  _init();\n}\n\n   Future<void> _init() async {\n     try {\n       await player.setUrl(url);\n     } catch (e) {\n       debugPrint('An error occurred $e');\n     }\n   }\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      debugShowCheckedModeBanner: false,\n      home: Scaffold(\n        appBar: AppBar(title: const Text("Audio Video Progress Bar"),),\n        body: SafeArea(\n          child: Padding(\n            padding: const EdgeInsets.all(20.0),\n            child: Column(\n              children: [\n                ProgressBar(\n                  progress: const Duration(milliseconds: 1000),\n                  buffered: const Duration(milliseconds: 2000),\n                  total: const Duration(milliseconds: 5000),\n                  onSeek: (duration) {\n                    print('User selected a new time: $duration');\n                  },\n                ),\n                const SizedBox(height: 20),\n                Container(\n                  child: _progressBar(),\n                ),\n                const SizedBox(height: 10),\n                _playButton(),\n              ],\n            ),\n          ),\n        ),\n      ),\n    );\n  }\n\n  StreamBuilder<DurationState> _progressBar() {\n    return StreamBuilder<DurationState>(\n      stream: durationState,\n      builder: (context, snapshot) {\n        final durationState = snapshot.data;\n        final progress = durationState?.progress ?? Duration.zero;\n        final buffered = durationState?.buffered ?? Duration.zero;\n        final total = durationState?.total ?? Duration.zero;\n        return ProgressBar(\n          progress: progress,\n          buffered: buffered,\n          total: total,\n          onSeek: (duration) {\n            player.seek(duration);\n          },\n          onDragUpdate: (details) {\n            debugPrint('${details.timeStamp}, ${details.localPosition}');\n          },\n        );\n      },\n    );\n  }\n\n  StreamBuilder<PlayerState> _playButton() {\n    return StreamBuilder<PlayerState>(\n      stream: player.playerStateStream,\n      builder: (context, snapshot) {\n        final playerState = snapshot.data;\n        final processingState = playerState?.processingState;\n        final playing = playerState?.playing;\n        if (processingState == ProcessingState.loading ||\n            processingState == ProcessingState.buffering) {\n          return Container(\n            margin: const EdgeInsets.all(8.0),\n            width: 32.0,\n            height: 32.0,\n            child: const CircularProgressIndicator(),\n          );\n        } else if (playing != true) {\n          return IconButton(\n            icon: const Icon(Icons.play_arrow),\n            iconSize: 32.0,\n            onPressed: player.play,\n          );\n        } else if (processingState != ProcessingState.completed) {\n          return IconButton(\n            icon: const Icon(Icons.pause),\n            iconSize: 32.0,\n            onPressed: player.pause,\n          );\n        } else {\n          return IconButton(\n            icon: const Icon(Icons.replay),\n            iconSize: 32.0,\n            onPressed: () => player.seek(Duration.zero),\n          );\n        }\n      },\n    );\n  }\n\n}\nclass DurationState {\n  const DurationState({this.progress, this.buffered, this.total});\n  final Duration ? progress;\n  final Duration ?  buffered;\n  final Duration ? total;\n}<\/pre>\n\n\n\n
Output:-<\/h3>\n\n\n\n
As shown in the video below, the progress bar moves when the audio plays and stops when it is paused.<\/p>\n\n\n\n