feat: add voice_recording_attachment_theme.dart

Author: xsahil03x

analysis_options.yaml

@@ -82,7 +82,6 @@ linter:
     - prefer_const_constructors_in_immutables
     - prefer_const_declarations
     - prefer_const_literals_to_create_immutables
-    - prefer_constructors_over_static_methods
     - prefer_contains
     - prefer_equal_for_default_values
     - prefer_final_fields

packages/stream_chat_flutter/lib/src/attachment/builder/voice_recording_attachment_builder/stream_voice_recording_list_player.dart

@@ -117,6 +117,7 @@ class _StreamVoiceRecordingListPlayerState
 /// {@template PlayListItem}
 /// Represents an audio attachment meta data.
 /// {@endtemplate}
+@Deprecated("Use 'PlaylistTrack' instead")
 class PlayListItem {
   /// {@macro PlayListItem}
   const PlayListItem({

packages/stream_chat_flutter/lib/src/attachment/file_attachment.dart

@@ -38,7 +38,7 @@ class StreamFileAttachment extends StatelessWidget {
 
   /// The background color of the attachment.
   ///
-  /// Defaults to [StreamChatTheme.colorTheme.barsBg].
+  /// Defaults to [StreamChatTheme._colorTheme.barsBg].
   final Color? backgroundColor;
 
   /// The constraints to use when displaying the file.

packages/stream_chat_flutter/lib/src/attachment/voice_recording_attachment.dart

@@ -112,7 +112,8 @@ class StreamVoiceRecordingAttachment extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final theme = StreamVoiceRecordingTheme.of(context).playerTheme;
+    final theme = StreamVoiceRecordingAttachmentTheme.of(context);
+    final waveformSliderTheme = theme.audioWaveformSliderTheme;
 
     final shape = this.shape ??
         RoundedRectangleBorder(
@@ -157,6 +158,7 @@ class StreamVoiceRecordingAttachment extends StatelessWidget {
                     AudioDurationText(
                       duration: track.duration,
                       position: track.position,
+                      style: theme.durationTextStyle,
                     ),
                     const SizedBox(width: 8),
                     Expanded(
@@ -172,6 +174,14 @@ class StreamVoiceRecordingAttachment extends StatelessWidget {
                           onChangeStart: onTrackSeekStart,
                           onChanged: onTrackSeekChanged,
                           onChangeEnd: onTrackSeekEnd,
+                          color: waveformSliderTheme?.color,
+                          progressColor: waveformSliderTheme?.progressColor,
+                          minBarHeight: waveformSliderTheme?.minBarHeight,
+                          spacingRatio: waveformSliderTheme?.spacingRatio,
+                          heightScale: waveformSliderTheme?.heightScale,
+                          thumbColor: waveformSliderTheme?.thumbColor,
+                          thumbBorderColor:
+                              waveformSliderTheme?.thumbBorderColor,
                         ),
                       ),
                     ),
@@ -229,6 +239,7 @@ class AudioDurationText extends StatelessWidget {
     super.key,
     required this.duration,
     required this.position,
+    this.style,
   });
 
   /// The total duration of the audio track.
@@ -237,14 +248,15 @@ class AudioDurationText extends StatelessWidget {
   /// The current position of the audio track.
   final Duration position;
 
+  /// The style to apply to the duration text.
+  final TextStyle? style;
+
   @override
   Widget build(BuildContext context) {
-    final theme = StreamVoiceRecordingTheme.of(context).playerTheme;
-
     if (position.inMilliseconds > 0) {
       return Text(
         position.toMinutesAndSeconds(),
-        style: theme.timerTextStyle?.copyWith(
+        style: style?.copyWith(
           // Use mono space for each num character.
           fontFeatures: [const FontFeature.tabularFigures()],
         ),
@@ -253,7 +265,7 @@ class AudioDurationText extends StatelessWidget {
 
     return Text(
       duration.toMinutesAndSeconds(),
-      style: theme.timerTextStyle?.copyWith(
+      style: style?.copyWith(
         // Use mono space for each num character.
         fontFeatures: [const FontFeature.tabularFigures()],
       ),
@@ -294,39 +306,21 @@ class AudioControlButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final streamTheme = StreamChatTheme.of(context);
-    final theme = StreamVoiceRecordingTheme.of(context).playerTheme;
+    final theme = StreamVoiceRecordingAttachmentTheme.of(context);
 
     return ElevatedButton(
-      style: ElevatedButton.styleFrom(
-        elevation: theme.buttonElevation,
-        padding: theme.buttonPadding,
-        backgroundColor: theme.buttonBackgroundColor,
-        disabledBackgroundColor: theme.buttonBackgroundColor,
-        shape: theme.buttonShape,
-        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
-        minimumSize: theme.buttonSize,
-      ),
+      style: theme.audioControlButtonStyle,
       onPressed: switch (state) {
         TrackState.loading => null,
         TrackState.idle => onPlay,
         TrackState.playing => onPause,
         TrackState.paused => onPlay,
       },
       child: switch (state) {
-        TrackState.loading => SizedBox.fromSize(
-            size: const Size.square(24 - /* Padding */ 2),
-            child: Center(
-              child: CircularProgressIndicator.adaptive(
-                valueColor: AlwaysStoppedAnimation(
-                  streamTheme.colorTheme.accentPrimary,
-                ),
-              ),
-            ),
-          ),
-        TrackState.idle => Icon(theme.playIcon, color: theme.iconColor),
-        TrackState.playing => Icon(theme.pauseIcon, color: theme.iconColor),
-        TrackState.paused => Icon(theme.playIcon, color: theme.iconColor),
+        TrackState.loading => theme.loadingIndicator,
+        TrackState.idle => theme.playIcon,
+        TrackState.playing => theme.pauseIcon,
+        TrackState.paused => theme.playIcon,
       },
     );
   }
@@ -353,24 +347,17 @@ class SpeedControlButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final theme = StreamVoiceRecordingTheme.of(context).playerTheme;
+    final theme = StreamVoiceRecordingAttachmentTheme.of(context);
 
     return ElevatedButton(
-      style: ElevatedButton.styleFrom(
-        elevation: theme.speedButtonElevation,
-        backgroundColor: theme.speedButtonBackgroundColor,
-        padding: theme.speedButtonPadding,
-        shape: theme.speedButtonShape,
-        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
-        minimumSize: theme.speedButtonSize,
-      ),
-      onPressed: () {
-        final nextSpeed = speed.next;
-        onChangeSpeed?.call(nextSpeed);
+      style: theme.speedControlButtonStyle,
+      onPressed: switch (onChangeSpeed) {
+        final it? => () => it(speed.next),
+        _ => null,
       },
       child: Text(
         'x${speed.speed}',
-        style: theme.speedButtonTextStyle,
+        style: theme.playbackSpeedTextStyle,
       ),
     );
   }

packages/stream_chat_flutter/lib/src/misc/audio_waveform.dart

@@ -3,6 +3,7 @@ import 'dart:math' as math;
 import 'package:collection/collection.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:stream_chat_flutter/src/theme/audio_waveform_slider_theme.dart';
 
 const _kAudioWaveformSliderThumbWidth = 4.0;
 const _kAudioWaveformSliderThumbHeight = 28.0;
@@ -20,13 +21,15 @@ class StreamAudioWaveformSlider extends StatefulWidget {
     required this.onChanged,
     this.onChangeEnd,
     this.limit = 100,
-    this.color = const Color(0xff7E828B),
+    this.color,
     this.progress = 0,
-    this.progressColor = const Color(0xff005FFF),
-    this.minBarHeight = 2,
-    this.spacingRatio = 0.3,
-    this.heightScale = 1,
+    this.progressColor,
+    this.minBarHeight,
+    this.spacingRatio,
+    this.heightScale,
     this.inverse = true,
+    this.thumbColor,
+    this.thumbBorderColor,
   });
 
   /// The waveform data to be drawn.
@@ -45,8 +48,8 @@ class StreamAudioWaveformSlider extends StatefulWidget {
 
   /// The color of the wave bars.
   ///
-  /// Defaults to [Colors.grey].
-  final Color color;
+  /// Defaults to [StreamAudioWaveformSliderThemeData.color].
+  final Color? color;
 
   /// The number of wave bars that will be draw in the screen. When the length
   /// of [waveform] is bigger than [limit] only the X last bars will be shown.
@@ -61,30 +64,40 @@ class StreamAudioWaveformSlider extends StatefulWidget {
 
   /// The color of the progressed wave bars.
   ///
-  /// Defaults to [Colors.blue].
-  final Color progressColor;
+  /// Defaults to [StreamAudioWaveformSliderThemeData.progressColor].
+  final Color? progressColor;
 
   /// The minimum height of the bars.
   ///
-  /// Defaults to 2.
-  final double minBarHeight;
+  /// Defaults to [StreamAudioWaveformSliderThemeData.minBarHeight].
+  final double? minBarHeight;
 
   /// The ratio of the spacing between the bars.
   ///
-  /// Defaults to 0.2.
-  final double spacingRatio;
+  /// Defaults to [StreamAudioWaveformSliderThemeData.spacingRatio].
+  final double? spacingRatio;
 
   /// The scale of the height of the bars.
   ///
-  /// Defaults to 1.
-  final double heightScale;
+  /// Defaults to [StreamAudioWaveformSliderThemeData.heightScale].
+  final double? heightScale;
 
   /// If true, the bars grow from right to left otherwise they grow from left
   /// to right.
   ///
   /// Defaults to true.
   final bool inverse;
 
+  /// The color of the slider thumb.
+  ///
+  /// Defaults to [StreamAudioWaveformSliderThemeData.thumbColor].
+  final Color? thumbColor;
+
+  /// The color of the slider thumb border.
+  ///
+  /// Defaults to [StreamAudioWaveformSliderThemeData.thumbBorderColor].
+  final Color? thumbBorderColor;
+
   @override
   State<StreamAudioWaveformSlider> createState() =>
       _StreamAudioWaveformSliderState();
@@ -93,6 +106,16 @@ class StreamAudioWaveformSlider extends StatefulWidget {
 class _StreamAudioWaveformSliderState extends State<StreamAudioWaveformSlider> {
   @override
   Widget build(BuildContext context) {
+    final theme = StreamAudioWaveformSliderTheme.of(context);
+
+    final color = widget.color ?? theme.color!;
+    final progressColor = widget.progressColor ?? theme.progressColor!;
+    final minBarHeight = widget.minBarHeight ?? theme.minBarHeight!;
+    final spacingRatio = widget.spacingRatio ?? theme.spacingRatio!;
+    final heightScale = widget.heightScale ?? theme.heightScale!;
+    final thumbColor = widget.thumbColor ?? theme.thumbColor!;
+    final thumbBorderColor = widget.thumbBorderColor ?? theme.thumbBorderColor!;
+
     return HorizontalSlider(
       onChangeStart: widget.onChangeStart,
       onChanged: widget.onChanged,
@@ -106,12 +129,12 @@ class _StreamAudioWaveformSliderState extends State<StreamAudioWaveformSlider> {
             StreamAudioWaveform(
               waveform: widget.waveform,
               limit: widget.limit,
-              color: widget.color,
+              color: color,
               progress: widget.progress,
-              progressColor: widget.progressColor,
-              minBarHeight: widget.minBarHeight,
-              spacingRatio: widget.spacingRatio,
-              heightScale: widget.heightScale,
+              progressColor: progressColor,
+              minBarHeight: minBarHeight,
+              spacingRatio: spacingRatio,
+              heightScale: heightScale,
               inverse: widget.inverse,
             ),
             Builder(
@@ -123,6 +146,8 @@ class _StreamAudioWaveformSliderState extends State<StreamAudioWaveformSlider> {
                   duration: const Duration(milliseconds: 300),
                   left: progressWidth - _kAudioWaveformSliderThumbWidth / 2,
                   child: StreamAudioWaveformSliderThumb(
+                    color: thumbColor,
+                    borderColor: thumbBorderColor,
                     height: constraints.maxHeight,
                   ),
                 );