RTL Direction Support

[amafsoftoman]

Thank you for this great package.

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

Update

[suragch]

Can you make an image of what you would like it to look like? I'm not so familiar with how progress bars should look in RTL format.

[amafsoftoman]

The thumb animation/movement start from right to the left

[suragch]

how about the labels?

[amafsoftoman]

The labels too, needs to change positions if RTL selected

[suragch]

The labels too, needs to change positions if RTL selected

Can you add those to your image?

[amafsoftoman]

The labels too, needs to change positions if RTL selected

Can you add those to your image?

[suragch]

@amafsoftoman

Thank you for the clarification. This is an interesting concept. I was previously aware of RTL text but I didn't realize that it affected things like audio controls. That makes sense, though.

Since this would require a significant change to the internal implementation of the code, I'd like to find out how big of a need this is. Are there some other popular apps that use RTL audio or video controls that I could check out?

[amafsoftoman]

@suragch

I totally agreed with you.
I've got the idea from the flutter itself; you can check the LinearProgressIndicator widget. you can see that it changes the direction according to the context.

Are there some other popular apps that use RTL audio or video controls that I could check out?

I don't think there is examples as far as i know. And I think its ok for a progress bar to be LTR on a RTL app, it just will make more sense if it switches the directions according to the app context.

For the record, I've tried to use Transform widget to flip the progress bar horizontally, it worked but not with labels. I'm sure this is a bad practice, however, it's a workaround that might be handy.

Transform(
     alignment: Alignment.center,
     transform: Matrix4.rotationY(math.pi),
     child: ProgressBar(...),
)

I guess we wait to see if this interests others.
Thank you.

[suragch]

Are you building an audio app yourself?

[amafsoftoman]

Yes i'am

…

On Wed, Oct 26, 2022 at 1:55 PM suragch ***@***.***> wrote: Are you building an audio app yourself? — Reply to this email directly, view it on GitHub <#52 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A2ORYL2VIBCI73KDOPHO5X3WFD5Y5ANCNFSM6AAAAAARMTTRJE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[suragch]

@amafsoftoman

If the transform works without the labels, you could turn the labels off and make your own labels with text widgets. That could be a temporary fix while we wait to see how many people are interested in this feature.

Another option would be to copy the source code to your app and modify it to your desired behavior.

If either of these things work for you, it would be helpful if you linked to your code so that others can see how you do it.

[amafsoftoman]

The first option is the exact idea I had. I think I'll go with it at the moment. I'll share any solution I came up with in the future. Thank you very much

…

On Tue, Nov 1, 2022, 08:36 suragch ***@***.***> wrote: @amafsoftoman <https://github.com/amafsoftoman> If the transform works without the labels, you could turn the labels off and make your own labels with text widgets. That could be a temporary fix while we wait to see how many people are interested in this feature. Another option would be to copy the source code to your app and modify it to your desired behavior. If either of these things work for you, it would be helpful if you linked to your code so that others can see how you do it. — Reply to this email directly, view it on GitHub <#52 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A2ORYL5NLT6UYE6RV5WYJ53WGCM4LANCNFSM6AAAAAARMTTRJE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[BraveEvidence]

This will help https://www.youtube.com/watch?v=IMQdSTlTXjA

[MohamadGreatWarrior]

Interested in RTL support.

[amafsoftoman]

Interested in RTL support.

@MohamadGreatWarrior

It would be awesome if this package supported right-to-left (RTL) direction. However, for the time being, I've managed to achieve the desired results by utilizing the Flutter Transform.flip widget. I disabled the default labels and created custom ones connected to the progress listener.

This solution works perfectly, but it's just a workaround. It essentially involves integrating built-in components with a custom coding approach

[ThusithaDeepal]

is there any solution for this?RTL support?

[tinyCoder32]

Native RTL support please.

[amafsoftoman]

@suragch , I Think it's really needed now 😃
As I can see , more people seem interested in RTL support.

For anyone interested in the workaround, while waiting for update, here is it:

ValueListenableBuilder<ProgressBarState>(
            valueListenable: audio.progressNotifier,
            builder: (_, value, __) {
              return Padding(
                padding: EdgeInsets.symmetric(horizontal: LARGE_PADDING_VALUE),
                child: Column(
                  children: [
                    Transform.flip(
                      flipX: true,
                      child: ProgressBar(
                        thumbRadius: 6,
                        barHeight: 4,
                        timeLabelPadding: 10,
                        progress: value.current,
                        buffered: value.buffered,
                        total: value.total,
                        onSeek: audio.goto,
                        timeLabelLocation: TimeLabelLocation.none,
                      ),
                    ),
                    addVerticalSpace(3),
                    //Custom labels
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          formatTime(value.current.inSeconds),
                          style: AppTextTheme(context).text12,
                        ),
                        Text(
                          formatTime(value.total.inSeconds),
                          style: AppTextTheme(context).text12,
                        ),
                      ],
                    )
                  ],
                ),
              );
            });

Just disable default labels and create custom one, and then add the value from the listener with some time formatting.

If anyone interested in converting seconds to a formatted time, here is a simple method:

String formatTime(int seconds) {
  int sec = (seconds % 60);
  int min = (seconds / 60).floor();
  String minutes = min.toString().length <= 1 ? '0$min' : '$min';
  String second = sec.toString().length <= 1 ? '0$sec' : '$sec';
  return '$minutes:$second';
}

[suragch]

Thank you for sharing your workaround, @amafsoftoman . I hope that will make it easier for others to support RTL in their apps.

I've been pretty busy with my client work recently, so I haven't had a lot of time to contribute to free open-source projects. I realize this probably isn't possible for indie developers, but if there are any companies out there who would be willing to fund a feature request like this, I'm open to that. But if not, I'd still consider implementing it, but probably not right way. Until then, I recommend people use the solution above.