suragch / audio_video_progress_bar Goto Github PK

I'm wondering about new "onDrag" feature to track the current position of thumb. Right now we can get the final position of the thumb after stop dragging it (onSeek callback).
In other words: I'm looking for a solution to dynamically get the position of thumb - let's say from 0...to 1 , recalculate the time based on that and finally display it (like on YouTube)

It could be accessed like onSeek callback:

on the examples at https://github.com/suragch/audio_video_progress_bar , the progress bar has no border radius

however when executing, take a look...

It places the border of the progress bar with radius. Is there some how to control it ? I can't find anything on the doc.

I really wish to set my progress bar as it seens on the github pag, I mean: borderRadius = 0 on progress bar.

Currently it is only possible to customize the padding / text style / position of the time labels.

We can't add custom widgets as labels (i.e. what if I want a yellow circular container as a label).

Proposal

Allow creating custom labels with a builder function. I.e. tyedef TimeLabelBuilder = Widget Function(Duration);

The image shows the problem:

flutter pub get fails with Flutter 3.3.2 / stable - Dart 2.18.1

Running "flutter pub get" in example...                       
This app is using a deprecated version of the Android embedding.
To avoid unexpected runtime failures, or future build failures, try to migrate this app to the V2 embedding.
Take a look at the docs for migrating an app: https://github.com/flutter/flutter/wiki/Upgrading-pre-1.12-Android-projects
The plugin `audio_session` requires your app to be migrated to the Android embedding v2. 
Follow the steps on https://flutter.dev/go/android-project-migration and re-run this command.
exit code 1

Prerequisites:

• VidePlayerController
• ProgressBar with VideoPlayerController as the source for the progress, and total values. (no buffering required)

Issue: Progress and thumb position should update according to position, but instead it only updates when a setState is called.

Widget:

ProgressBar(
        progress: localController.value.position,
        total: localController.value.duration,
        timeLabelLocation: TimeLabelLocation.none,
        onSeek: (duration) {
          print("Duration: $duration");
          setState(() {
            localController.seekTo(duration);
            // localController.play();
            elapsed =
                // localController.value.position +
                duration;
          });
          print(localController.value.position);
        },
      ),

seek not working with user gesture detector and detect horizontal scroll !

When dragging the thumb of the progress bar, the progress section of the progress bar is not redrawn.

This results in the thumb 'disconnecting' from the progress part.

Steps to reproduce

1. flutter create myapp
2. update main.dart with the code sample
3. add audio_video_progress_bar as a dependency
   (for the sake of the sample, I copied the code into a Dart file instead)
4. flutter run
5. drag the thumb back and forth, do not release the thumb
6. observe that when dragging the thumb to the right, it eventually looks to 'disconnect' from the progress part

import 'package:flutter/material.dart';

// copied from the sources, didn't add it as a dependency
import 'package:myapp/audio_video_progress_bar.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Duration _progress = const Duration(seconds: 5);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ProgressBar(
          total: const Duration(seconds: 30),
          progress: _progress,
          onSeek: (value) {
            setState(() {
              _progress = value;
            });
          },
        ),
      ),
    );
  }
}

Recording

Can not onTap feature package support? That is, go to the relevant part by clicking, not only by dragging

User could select point A then B, the widget draw line from A to B with different color.

By default, the progress bar thumb is on position zero despite the fact that the progress value is set to different value. I tried to resolve this issue and I think this is because the double _thumbValue = 0.0 . It should be given a value in constructor. I tried to fix this and came with this solution:
audio_video_progress_bar.zip
P. S. I also implemented an isDraggable named parameter, in order to restrict the possibility to move the thumb if needed.

look at picture. progres time should be 05:22. total time should be 01:58:56.

When the stroke cap is StrokeCap.round, the progress bar is painted with a fixed radius that is half the bar height.

Allow overriding the default by adding a new property double? progressBarRadius,
which defaults to barHeight / 2 if null.

Issues #13 and #15 affected where the thumb is drawn when at the start or end of the bar.

Currently the center of the thumb goes all the way to the ends of the bar. That means the thumb radius will draw outside of the widget area.

However, between #13 and #15 the thumb radius was aligned with the bar like so:

I like that look because it lines up well with vertical labels. The disadvantage is that the thumb will not start moving until the current time passes the center of the thumb. Also it will stop moving one radius-width before the end of the song. Usually this is only a few seconds, though, and for me I don't mind that.

So I'm thinking of adding an option to select where the thumb will align. I'll keep centered as the default since that is what it is now, but are there good API naming suggestions?

Perhaps this:

thumbAlign: ThumbAlignment.edge,

enum ThumbAlignment {
  center,
  edge,
}

Would it be possible to animate the thumb glow as it opens, similar to the material Slider?

Hi, it is possible to setup a border to this progress bar?

Thank you for this great package.

I wonder if it is possible to add RTL support FEATURE to the progress bar direction.

Update

可以改成loading 状态

Hello,
The progress and total duration of ProgressBar don't change their text scales based on the device text scale factor.

Is it possible to add text scaling?

This would change the left and right time labels from this:

00:00
03:27

to this:

0:00
3:27

Zero padding for minutes would remain unaffected for hours greater than 0:

1:00:00
1:03:27

This is related to PR #24.

Since this will affect everyone's UI, please leave a comment here regarding your opinion.

Description

If I add the widget inside my app(web app), the widget inpector won't show the tree structure.

Step

1. add ProgressBar(progress: Duration(seconds: 20), total: Duration(seconds: 60)) in app
2. run debug build
3. open devTool widget inspector page

════════ Exception caught by Flutter framework ═════════════════════════════════
The following assertion was thrown during a service extension callback for "ext.flutter.inspector.getRootWidgetSummaryTreeWithPreviews":
Assertion failed:
../…/foundation/diagnostics.dart:2137
ifTrue != null || ifFalse != null
is not true


When the exception was thrown, this was the stack
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49      throw_
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 29:3        assertFailed
packages/flutter/src/foundation/diagnostics.dart 2137:40                          new
packages/audio_video_progress_bar/audio_video_progress_bar.dart 338:20            debugFillProperties
packages/flutter/src/widgets/framework.dart 4466:14                               debugFillProperties
packages/flutter/src/widgets/framework.dart 6201:11                               debugFillProperties
packages/flutter/src/foundation/diagnostics.dart 2940:17                          <fn>
packages/flutter/src/foundation/diagnostics.dart 2942:16                          get builder
packages/flutter/src/foundation/diagnostics.dart 2954:77                          get emptyBodyDescription
packages/flutter/src/foundation/diagnostics.dart 1632:13                          <fn>
packages/flutter/src/foundation/diagnostics.dart 1657:21                          <fn>
packages/flutter/src/foundation/diagnostics.dart 1660:14                          toJsonMap
packages/flutter/src/widgets/framework.dart 4632:45                               toJsonMap
packages/flutter/src/foundation/diagnostics.dart 1686:18                          <fn>
dart-sdk/lib/internal/iterable.dart 413:31                                        elementAt
dart-sdk/lib/internal/iterable.dart 342:26                                        moveNext
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 748:20  next
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 586:14                of
dart-sdk/lib/internal/iterable.dart 213:44                                        toList
packages/flutter/src/foundation/diagnostics.dart 1686:58                          toJsonList
packages/flutter/src/foundation/diagnostics.dart 1654:23                          <fn>
packages/flutter/src/foundation/diagnostics.dart 1657:21                          <fn>
packages/flutter/src/foundation/diagnostics.dart 1660:14                          toJsonMap
packages/flutter/src/widgets/framework.dart 4632:45                               toJsonMap
packages/flutter/src/foundation/diagnostics.dart 1686:18                          <fn>
dart-sdk/lib/internal/iterable.dart 413:31                                        elementAt
dart-sdk/lib/internal/iterable.dart 342:26                                        moveNext
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 748:20  next
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 586:14                of
dart-sdk/lib/internal/iterable.dart 213:44                                        toList
packages/flutter/src/foundation/diagnostics.dart 1686:58                          toJsonList
packages/flutter/src/foundation/diagnostics.dart 1654:23                          <fn>
packages/flutter/src/foundation/diagnostics.dart 1657:21                          <fn>
packages/flutter/src/foundation/diagnostics.dart 1660:14                          toJsonMap
packages/flutter/src/widgets/framework.dart 4632:45                               toJsonMap
packages/flutter/src/foundation/diagnostics.dart 1686:18                          <fn>
dart-sdk/lib/internal/iterable.dart 413:31                                        elementAt
dart-sdk/lib/internal/iterable.dart 342:26                                        moveNext
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 748:20  next
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 586:14                of
dart-sdk/lib/internal/iterable.dart 213:44                                        toList
packages/flutter/src/foundation/diagnostics.dart 1686:58                          toJsonList
packages/flutter/src/foundation/diagnostics.dart 1654:23                          <fn>
packages/flutter/src/foundation/diagnostics.dart 1657:21                          <fn>
packages/flutter/src/foundation/diagnostics.dart 1660:14                          toJsonMap
packages/flutter/src/widgets/framework.dart 4632:45                               toJsonMap
packages/flutter/src/foundation/diagnostics.dart 1686:18                          <fn>
dart-sdk/lib/internal/iterable.dart 413:31                                        elementAt
dart-sdk/lib/internal/iterable.dart 342:26                                        moveNext
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 748:20  next
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 586:14                of
dart-sdk/lib/internal/iterable.dart 213:44                                        toList
packages/flutter/src/foundation/diagnostics.dart 1686:58                          toJsonList
packages/flutter/src/foundation/diagnostics.dart 1654:23                          <fn>
packages/flutter/src/foundation/diagnostics.dart 1657:21                          <fn>
packages/flutter/src/foundation/diagnostics.dart 1660:14                          toJsonMap
packages/flutter/src/widgets/framework.dart 4632:45                               toJsonMap
packages/flutter/src/widgets/widget_inspector.dart 1606:18                        [_nodeToJson]
%3Canonymous%3E 69:49                                                             getRootWidgetSummaryTreeWithPreviews
packages/flutter/src/foundation/binding.dart 855:32                               <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50                <fn>
dart-sdk/lib/async/zone.dart 1653:54                                              runUnary
dart-sdk/lib/async/future_impl.dart 147:18                                        handleValue
dart-sdk/lib/async/future_impl.dart 766:44                                        handleValueCallback
dart-sdk/lib/async/future_impl.dart 795:13                                        _propagateToListeners
dart-sdk/lib/async/future_impl.dart 557:7                                         [_complete]
dart-sdk/lib/async/future.dart 421:15                                             <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 48:19           internalCallback
════════════════════════════════════════════════════════════════════════════════

[✓] Flutter (Channel stable, 3.3.2, on macOS 12.5.1 21G83 darwin-arm, locale zh-Hant-TW)
    • Flutter version 3.3.2 on channel stable at /Users/grayhuang/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision e3c29ec00c (6 days ago), 2022-09-14 08:46:55 -0500
    • Engine revision a4ff2c53d8
    • Dart version 2.18.1
    • DevTools version 2.15.0

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).

[✓] VS Code (version 1.71.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.48.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.5.1 21G83 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 105.0.5195.125

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 3 categories.

Could you add some horizontal padding for the actual progress bar, when timeLabelLocation.sides is set? Or maybe exposing a new property for that?

ProgressBar(
   ...
   barHeight: 3,     
   thumbRadius: 8,
   thumbGlowRadius: 16,
   timeLabelLocation: TimeLabelLocation.sides,
);

To play the audio within range. I think it could be a great idea to have another thumb to seek from another end.

In my case I'm streaming a web radio, so there is no total at all as it never ends. So to paliate this I'm doing this:

ProgressBar(
              progress: playerDuration.position,
              buffered: playerDuration.buffered,
              total: playerDuration.buffered,
              onSeek: (duration) {
                print('User selected a new time: $duration');
              },
            ),

But by doing so when audio is paused and stream is still buffering, then the thumb circle position is not updated which give this weird thing:

Basically if total changes, the thumb position should be updated accordingly.

Thanks a lot for this great package!

ProgressBar有没有自动进度的方法，如果更新ProgressBar进度的话必须要手动调用setSate()方法吗

法

As user I would want to manage the padding between the progress bar and the labels, could be possible with the current design?

Thanks for the package and the tests written, they are always appreciated.

It would be nice if there was an option to display the remaining duration. In other words, instead of displaying the current duration position and the total one, just the duration remaining would be displayed. Such that if an audio is a 10 second clip, at the start it would display 00:10, then after 5 seconds 00:05, then after another 5 seconds 00:00 (only one duration displayed at a time).

Alternatively let the user decide how to display the duration, as other people may have other requirements (like displaying millis for example)

as example saied I using the package but when I touch the thumb glow and slide it after I put off my hand from screen the glow dosent dissapre

How can I make the Progress Bar not be the only one for everyone?

When I play back an audio recording of users, then all existing audio recordings start to display the progress.

I want to use this package to display the progress on a video playing, and it would be really useful to have an option to, instead of displaying the full length of the video, display the time left.

This is a direct consequence of the way you solved #13. I know what is the cause, but don't know how to explain it in English precisely. It is all about thumb's sides and center. On song (of few minutes duration), thumb starts to move too late (after few seconds) and it reaches the end too early (few seconds early), before the duration has been completed. Those seconds that are lost are due to the fact that sides of the thumb are reaching the start/end of progressbar, and NOT its center, as it should be.

I will try to record video about the issue, and share it here if you need it.

The gesture recognition of the ProgressBar may conflict with other (usually ancestor) widgets trying to recognize similar gestures.
Also see #39 , #31, #23

I have created a replicated this issue in an stand-alone project here. The gif below demonstrates the issue

The underlying source of this problem is that when multiple gesture recognizers compete in the same space, the framework resolves the final gesture / widget using a sophisticated logic. Read GestureArenaManager. Also see Gesture Disambugation.

The first step is to level the competing field by using consistent gesture settings (i.e. Slop values) through out. We may do this by using MediaQuery.of(context).gestureSettings. This is sufficient to get our drag performing well with the competition.

Next step is to understand how Tap competes with Drag.

When there is just a single gesture recognizer that is a DragRecognizer, there is no competition and the drag wins by default. But when there are widgets competing for both taps and drags, the framework has to do more work to identify the recognizer that will win the gesture. There are a couple of ways to tackle this

1. We let our HorizontalDragGestureRecognizer take absolute precedence - see #29 . The consequence is there is no longer a differentiator between different gestures - Tap, Double Tap, Drag - they are all treated as Drag

2. We handle Taps and Drags separately in it's own gesture recognizer and re-use as much code as possible between the two. This is how the framework's Slider class works.

3. Instead of creating an exclusive Tap gesture recognizer, we handle a tap down with a GestureDragDownCallback in the HorizontalDragGestureRecognizer's onDown property. I will link an implementation of this tactic in a PR below.

Thanks to @suragch for this wonderful widget that lays a fantastic foundation to dive deeper.
And @Hwan-seok for documenting the issue in detail in #23

Is this a bug? or didn't implemented?

I would love to have this feature it is like adding custom color for custom period of time for example
var hotDuration = [{'from':Duration(hours:1,minutes:2),'to':Duration(hours:1,minutes:10)}];
it will take those value and color them for example with custom color or secondary color

The progress bar is not shown

Expanded( child: Container( color: Colors.white, // color: const Color(0xff181A1E), child: Column( children: [ Padding( padding: const EdgeInsets.fromLTRB(20, 30, 20, 0), child: 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'); }, ), ), ], ), ), ),

Platform IOS
flutter stable channel

The time label colors don't update when the theme changes.

To fix this we should calculate _leftTimeLabel and _rightTimeLabel in the paint method rather than caching them beforehand.

I have the ProgressBar contained a stack, and it is set to only appear when my video is paused. On pause, the progress bar does reflect the time elapsed out the total time. The highlighted portion does indicate how much time has passed.

However, the circle "thumb" is always set at 0:00.

This issue only occurs when the ProgressBar is set to display when the video is paused. If I remove this condition, the circle does follow the time passed.

Hi , I have feature to play short voice in my app if even there is one or 2 seconds of audio , but when buffer value download and want to display on screen the buffer cross it out this is picture of it .

Hi,

Thank you for an amazing tool. I was wondering progress bar support live videos?

When passing --enable-impeller and running on real hardware (iPhone X, iOS 16.2) a rounded left end cap will not be rendered, but it will be on the right side. The screen shot above comes from the example app in this repo.

Hi,

First of all, thx for this plugin. I been trying several progress bar, they all had a non value exception that I did not debug.

Your plugin works like a charm.

I just need to modify the label time Style and color. My background color is dark, then I need to enlight the label color as they are not visible.

Would you please tell me how can I achieve this please ?

Maybe this would be a simple request to add too.

thx dude

Make the Lable style separate for left and right, because in some designs they can be different. ie leftLableStyle & rightLableStyle or any other suitable names

Current Behavior

Currently the behavior is like so:

• After the user lifts their finger from an drag event, onSeek is triggered at the duration position of the up event.
• If a user taps the progress bar, onSeek is called at the duration position of the tap event.

This is the behavior of the audio player control in apps like Signal, Messenger, WhatsApp, Teams, YouTube web, and Music Speed Changer.

Proposed Behavior

However, some developers may wish to ignore onTap events or handle them differently than drag events. Here are some reasons:

• Users might accidentally tap the progress bar and not want to seek to a new position.
• Implement different behavior on a tap, for example, play/pause, collapsing the player, etc.

This is the behavior of YouTube mobile app, Netflix, and Spotify.

API

This could be implemented with an API like so:

onTap: (duration) {
  // handle tap event
},

If onTap is null then the behavior would default to the current behavior, that is, seek to the tap location.

Notes

This is a slight modification of the original proposal put forth by @thesensibledev. See the discussion in #44 and #49 for more details.

I'm writing this up to see how many developers need this feature. Give this issue a thumbs up if you are using the progress bar in your app and you want to handle onTap separately.

PR #45 causes an exception in the tests

The following assertion was thrown attaching to the render tree:
No MediaQuery widget ancestor found.
ProgressBar widgets require a MediaQuery widget ancestor.
The specific widget that could not find a MediaQuery ancestor was:
  ProgressBar
The ownership chain for the affected widget is: "ProgressBar ← [root]"
No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of().
This can happen because you have not added a WidgetsApp, CupertinoApp, or MaterialApp widget (those
widgets introduce a MediaQuery), or it can happen if the context you use comes from a widget above
those widgets.

The exception happens because a MediaQuery was introduced in the PR to read the default gesture settings. See #43
A solution is prescribed in the exception - This can happen because you have not added a WidgetsApp, CupertinoApp, or MaterialApp widget.

Also see how Material Slider is tested for reference

There seems to be a bar height option but no setting for width. What's the best way to change the width which appears fixed?

Is it possible to increase the clickable area/hitbox of the ProgressBar widget, without increasing barHeight or thumbRadius?

Hi, is it possible to make it impossible to drag the slider?

non acc url format : audioPlayer.setUrl('https://archive.org/download/IGM-V7/IGM%20-%20Vol.%207/25%20Diablo%20-%20Tristram%20%28Blizzard%29.mp3');
onSeek: (u){
audioPlayer.seek(u); // outputs : fine
},

...

acc url format :audioPlayer.setUrl('url');
onSeek: (u){
audioPlayer.seek(u); // outputs : always run the audio from beginning .
},

how can ı change thumb border thickness and thumb border color

The current functionality of the seekbar plugin does not include real-time display of the current value while the seekbar is being dragged. How can I implement such a thing ? Thanks.