From 16324c8b9aac75171de728b0d8ba56232e28b67d Mon Sep 17 00:00:00 2001 From: Ben Cherry Date: Wed, 22 Jan 2025 17:36:41 -0800 Subject: [PATCH 1/5] allow customization of audio visualizer color --- .../track/audio_visualizer_widget.dart | 73 ++++++++++++------- 1 file changed, 45 insertions(+), 28 deletions(-) diff --git a/lib/src/ui/widgets/track/audio_visualizer_widget.dart b/lib/src/ui/widgets/track/audio_visualizer_widget.dart index 64b94c1..78b9d67 100644 --- a/lib/src/ui/widgets/track/audio_visualizer_widget.dart +++ b/lib/src/ui/widgets/track/audio_visualizer_widget.dart @@ -7,8 +7,37 @@ import '../../../context/track_reference_context.dart'; import '../theme.dart'; import 'no_track_widget.dart'; +class AudioVisualizerOptions { + final int count; + final double width; + final double minHeight; + final double maxHeight; + final int durationInMilliseconds; + final Color color; + final double spacing; + final double cornerRadius; + final double opacity; + + const AudioVisualizerOptions({ + this.count = 7, + this.width = 12, + this.minHeight = 12, + this.maxHeight = 100, + this.durationInMilliseconds = 500, + this.color = Colors.white, + this.spacing = 5, + this.cornerRadius = 9999, + this.opacity = 1.0, + }); +} + class AudioVisualizerWidget extends StatelessWidget { - const AudioVisualizerWidget({Key? key}) : super(key: key); + final AudioVisualizerOptions options; + + const AudioVisualizerWidget({ + Key? key, + this.options = const AudioVisualizerOptions(), + }) : super(key: key); @override Widget build(BuildContext context) { @@ -31,11 +60,7 @@ class AudioVisualizerWidget extends StatelessWidget { child: Center( child: SoundWaveformWidget( audioTrack: audioTrack, - count: 7, - width: 12, - minHeight: 12, - maxHeight: 100, - durationInMilliseconds: 500, + options: options, ), ), ); @@ -46,21 +71,15 @@ class AudioVisualizerWidget extends StatelessWidget { } class SoundWaveformWidget extends StatefulWidget { - final int count; - final double width; - final double minHeight; - final double maxHeight; - final int durationInMilliseconds; + final AudioVisualizerOptions options; + final AudioTrack? audioTrack; + const SoundWaveformWidget({ super.key, this.audioTrack, - this.count = 7, - this.width = 5, - this.minHeight = 8, - this.maxHeight = 100, - this.durationInMilliseconds = 500, + this.options = const AudioVisualizerOptions(), }); - final AudioTrack? audioTrack; + @override State createState() => _SoundWaveformWidgetState(); } @@ -102,7 +121,7 @@ class _SoundWaveformWidgetState extends State controller = AnimationController( vsync: this, duration: Duration( - milliseconds: widget.durationInMilliseconds, + milliseconds: widget.options.durationInMilliseconds, )) ..repeat(); @@ -118,33 +137,31 @@ class _SoundWaveformWidgetState extends State @override Widget build(BuildContext context) { - final count = widget.count; - final minHeight = widget.minHeight; - final maxHeight = widget.maxHeight; + final count = widget.options.count; + final minHeight = widget.options.minHeight; + final maxHeight = widget.options.maxHeight; return AnimatedBuilder( animation: controller, builder: (c, child) { - //double t = controller.value; - //int current = (samples.length * t).floor(); return Row( mainAxisSize: MainAxisSize.min, children: List.generate( count, (i) => AnimatedContainer( duration: Duration( - milliseconds: widget.durationInMilliseconds ~/ count), + milliseconds: widget.options.durationInMilliseconds ~/ count), margin: i == (samples.length - 1) ? EdgeInsets.zero - : const EdgeInsets.only(right: 5), + : EdgeInsets.only(right: widget.options.spacing), height: samples[i] < minHeight ? minHeight : samples[i] > maxHeight ? maxHeight : samples[i], - width: widget.width, + width: widget.options.width, decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(9999), + color: widget.options.color.withOpacity(widget.options.opacity), + borderRadius: BorderRadius.circular(widget.options.cornerRadius), ), ), ), From 14ed9d2496fac83de1659f273fd9150671039a9f Mon Sep 17 00:00:00 2001 From: Ben Cherry Date: Wed, 22 Jan 2025 17:46:03 -0800 Subject: [PATCH 2/5] mino --- .../track/audio_visualizer_widget.dart | 47 +++++++++++-------- 1 file changed, 28 insertions(+), 19 deletions(-) diff --git a/lib/src/ui/widgets/track/audio_visualizer_widget.dart b/lib/src/ui/widgets/track/audio_visualizer_widget.dart index 78b9d67..c0c8a79 100644 --- a/lib/src/ui/widgets/track/audio_visualizer_widget.dart +++ b/lib/src/ui/widgets/track/audio_visualizer_widget.dart @@ -16,7 +16,7 @@ class AudioVisualizerOptions { final Color color; final double spacing; final double cornerRadius; - final double opacity; + final double barMinOpacity; const AudioVisualizerOptions({ this.count = 7, @@ -27,7 +27,7 @@ class AudioVisualizerOptions { this.color = Colors.white, this.spacing = 5, this.cornerRadius = 9999, - this.opacity = 1.0, + this.barMinOpacity = 0.35, }); } @@ -147,23 +147,32 @@ class _SoundWaveformWidgetState extends State mainAxisSize: MainAxisSize.min, children: List.generate( count, - (i) => AnimatedContainer( - duration: Duration( - milliseconds: widget.options.durationInMilliseconds ~/ count), - margin: i == (samples.length - 1) - ? EdgeInsets.zero - : EdgeInsets.only(right: widget.options.spacing), - height: samples[i] < minHeight - ? minHeight - : samples[i] > maxHeight - ? maxHeight - : samples[i], - width: widget.options.width, - decoration: BoxDecoration( - color: widget.options.color.withOpacity(widget.options.opacity), - borderRadius: BorderRadius.circular(widget.options.cornerRadius), - ), - ), + (i) { + // Calculate relative height (0.0 to 1.0) + final heightPercent = ((samples[i] - minHeight) / (maxHeight - minHeight)) + .clamp(0.0, 1.0); + // Calculate opacity based on height + final barOpacity = (1.0 - widget.options.barMinOpacity) * heightPercent + + widget.options.barMinOpacity; + + return AnimatedContainer( + duration: Duration( + milliseconds: widget.options.durationInMilliseconds ~/ count), + margin: i == (samples.length - 1) + ? EdgeInsets.zero + : EdgeInsets.only(right: widget.options.spacing), + height: samples[i] < minHeight + ? minHeight + : samples[i] > maxHeight + ? maxHeight + : samples[i], + width: widget.options.width, + decoration: BoxDecoration( + color: widget.options.color.withOpacity(barOpacity), + borderRadius: BorderRadius.circular(widget.options.cornerRadius), + ), + ); + }, ), ); }, From 56640655922d207b7f625b60df25ce429104f84a Mon Sep 17 00:00:00 2001 From: Ben Cherry Date: Wed, 22 Jan 2025 17:46:37 -0800 Subject: [PATCH 3/5] fix --- lib/src/ui/widgets/track/audio_visualizer_widget.dart | 2 -- 1 file changed, 2 deletions(-) diff --git a/lib/src/ui/widgets/track/audio_visualizer_widget.dart b/lib/src/ui/widgets/track/audio_visualizer_widget.dart index c0c8a79..f02e533 100644 --- a/lib/src/ui/widgets/track/audio_visualizer_widget.dart +++ b/lib/src/ui/widgets/track/audio_visualizer_widget.dart @@ -148,10 +148,8 @@ class _SoundWaveformWidgetState extends State children: List.generate( count, (i) { - // Calculate relative height (0.0 to 1.0) final heightPercent = ((samples[i] - minHeight) / (maxHeight - minHeight)) .clamp(0.0, 1.0); - // Calculate opacity based on height final barOpacity = (1.0 - widget.options.barMinOpacity) * heightPercent + widget.options.barMinOpacity; From 017747aa50fb3282a15bd3431cba277e2f91bf81 Mon Sep 17 00:00:00 2001 From: Ben Cherry Date: Thu, 23 Jan 2025 09:30:19 -0800 Subject: [PATCH 4/5] fmt --- .../track/audio_visualizer_widget.dart | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/lib/src/ui/widgets/track/audio_visualizer_widget.dart b/lib/src/ui/widgets/track/audio_visualizer_widget.dart index f02e533..a7ea235 100644 --- a/lib/src/ui/widgets/track/audio_visualizer_widget.dart +++ b/lib/src/ui/widgets/track/audio_visualizer_widget.dart @@ -33,7 +33,7 @@ class AudioVisualizerOptions { class AudioVisualizerWidget extends StatelessWidget { final AudioVisualizerOptions options; - + const AudioVisualizerWidget({ Key? key, this.options = const AudioVisualizerOptions(), @@ -148,14 +148,17 @@ class _SoundWaveformWidgetState extends State children: List.generate( count, (i) { - final heightPercent = ((samples[i] - minHeight) / (maxHeight - minHeight)) - .clamp(0.0, 1.0); - final barOpacity = (1.0 - widget.options.barMinOpacity) * heightPercent + - widget.options.barMinOpacity; - + final heightPercent = + ((samples[i] - minHeight) / (maxHeight - minHeight)) + .clamp(0.0, 1.0); + final barOpacity = + (1.0 - widget.options.barMinOpacity) * heightPercent + + widget.options.barMinOpacity; + return AnimatedContainer( duration: Duration( - milliseconds: widget.options.durationInMilliseconds ~/ count), + milliseconds: + widget.options.durationInMilliseconds ~/ count), margin: i == (samples.length - 1) ? EdgeInsets.zero : EdgeInsets.only(right: widget.options.spacing), @@ -167,7 +170,8 @@ class _SoundWaveformWidgetState extends State width: widget.options.width, decoration: BoxDecoration( color: widget.options.color.withOpacity(barOpacity), - borderRadius: BorderRadius.circular(widget.options.cornerRadius), + borderRadius: + BorderRadius.circular(widget.options.cornerRadius), ), ); }, From 3098b192582357d8fc4b8e8a3bf8b46791842098 Mon Sep 17 00:00:00 2001 From: Ben Cherry Date: Fri, 24 Jan 2025 17:06:33 -0800 Subject: [PATCH 5/5] withValues --- lib/src/ui/widgets/track/audio_visualizer_widget.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/ui/widgets/track/audio_visualizer_widget.dart b/lib/src/ui/widgets/track/audio_visualizer_widget.dart index a7ea235..e228b6f 100644 --- a/lib/src/ui/widgets/track/audio_visualizer_widget.dart +++ b/lib/src/ui/widgets/track/audio_visualizer_widget.dart @@ -169,7 +169,7 @@ class _SoundWaveformWidgetState extends State : samples[i], width: widget.options.width, decoration: BoxDecoration( - color: widget.options.color.withOpacity(barOpacity), + color: widget.options.color.withValues(alpha: barOpacity), borderRadius: BorderRadius.circular(widget.options.cornerRadius), ),