Voice Recorder iOS 17 style

lib/app/components/custom/custom_waveform_icon.dart

@@ -0,0 +1,11 @@
+import 'package:flutter/widgets.dart';
+
+// iOS 17 waveform icon for iMessage
+
+class WaveformIconData extends IconData {
+  const WaveformIconData(int codePoint)
+      : super(
+    codePoint,
+    fontFamily: 'WaveFormIcon',
+  );
+}

lib/app/layouts/conversation_view/colors/voice_message_recorder_colors.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/cupertino.dart';
+
+const Color iOSWavesColor = CupertinoDynamicColor.withBrightness(
+  color: Color(0xFFFF3B30),
+  darkColor: Color(0xFFFF1B30),
+);
+
+const Color iOSVoiceRecorderBackgroundColor = CupertinoDynamicColor.withBrightness(
+  color: Color(0xFFFFF5F4),
+  darkColor: Color(0xFF1C0606),
+);
+
+const Color iOSStopIconColor = CupertinoDynamicColor.withBrightness(
+  color: Color(0xFFFF3B30),
+  darkColor: Color(0xFFff6f61),
+);
+
+const Color iOSStopIconBackground = CupertinoDynamicColor.withBrightness(
+  color: Color(0xFFFFD2CF),
+  darkColor: Color(0xFF7E1116),
+);

lib/app/layouts/conversation_view/widgets/text_field/conversation_text_field.dart

@@ -10,6 +10,8 @@ import 'package:bluebubbles/app/layouts/conversation_view/widgets/message/send_a
 import 'package:bluebubbles/app/layouts/conversation_view/widgets/text_field/picked_attachments_holder.dart';
 import 'package:bluebubbles/app/layouts/conversation_view/widgets/text_field/reply_holder.dart';
 import 'package:bluebubbles/app/layouts/conversation_view/widgets/text_field/text_field_suffix.dart';
+import 'package:bluebubbles/app/layouts/conversation_view/widgets/text_field/voice_message_recorder.dart';
+import 'package:bluebubbles/app/layouts/conversation_view/colors/voice_message_recorder_colors.dart';
 import 'package:bluebubbles/app/wrappers/stateful_boilerplate.dart';
 import 'package:bluebubbles/helpers/helpers.dart';
 import 'package:bluebubbles/models/models.dart';
@@ -19,8 +21,8 @@ import 'package:bluebubbles/utils/share.dart';
 import 'package:chunked_stream/chunked_stream.dart';
 import 'package:collection/collection.dart';
 import 'package:emojis/emoji.dart';
-import 'package:file_picker/file_picker.dart' hide PlatformFile;
 import 'package:file_picker/file_picker.dart' as pf;
+import 'package:file_picker/file_picker.dart' hide PlatformFile;
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
@@ -566,7 +568,7 @@ class ConversationTextFieldState extends CustomState<ConversationTextField, void
               IconButton(
                 icon: Icon(
                   iOS
-                      ? CupertinoIcons.square_arrow_up_on_square_fill
+                      ? CupertinoIcons.add_circled_solid
                       : material
                           ? Icons.add_circle_outline
                           : Icons.add,
@@ -731,27 +733,12 @@ class ConversationTextFieldState extends CustomState<ConversationTextField, void
                                                     ),
                                                   );
                                                 })
-                                            : AudioWaveforms(
-                                                size: Size(textFieldSize.width - (samsung ? 0 : 80), textFieldSize.height - 15),
-                                                recorderController: recorderController!,
-                                                padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 15),
-                                                waveStyle: const WaveStyle(
-                                                  waveColor: Colors.white,
-                                                  waveCap: StrokeCap.square,
-                                                  spacing: 4.0,
-                                                  showBottom: true,
-                                                  extendWaveform: true,
-                                                  showMiddleLine: false,
-                                                ),
-                                                decoration: BoxDecoration(
-                                                  border: Border.fromBorderSide(BorderSide(
-                                                    color: context.theme.colorScheme.outline,
-                                                    width: 1,
-                                                  )),
-                                                  borderRadius: BorderRadius.circular(20),
-                                                  color: context.theme.colorScheme.properSurface,
-                                                ),
-                                              );
+                                            : VoiceMessageRecorder(
+                                              recorderController: recorderController,
+                                              textFieldSize: textFieldSize,
+                                              iOS: iOS,
+                                              samsung: samsung,
+                                        );
                                       }),
                               ))),
                     SendAnimation(parentController: controller),
@@ -787,7 +774,7 @@ class ConversationTextFieldState extends CustomState<ConversationTextField, void
   }
 }
 
-class TextFieldComponent extends StatelessWidget {
+class TextFieldComponent extends StatefulWidget {
   const TextFieldComponent({
     super.key,
     required this.subjectTextController,
@@ -808,6 +795,47 @@ class TextFieldComponent extends StatelessWidget {
 
   final List<PlatformFile> initialAttachments;
 
+  @override
+  State<StatefulWidget> createState() => TextFieldComponentState();
+}
+
+
+class TextFieldComponentState extends State<TextFieldComponent> {
+  late final ConversationViewController? controller;
+  late final FocusNode? focusNode;
+  late final RecorderController? recorderController;
+  late final List<PlatformFile> initialAttachments;
+  late final MentionTextEditingController textController;
+  late final SpellCheckTextEditingController subjectTextController;
+  late final sendMessage;
+
+  late final ValueNotifier<bool> isRecordingNotifier;
+  TextFieldComponentState() : isRecordingNotifier = ValueNotifier<bool>(false);
+
+  @override
+  void initState() {
+    super.initState();
+    controller = widget.controller;
+    focusNode = widget.focusNode;
+    recorderController = widget.recorderController;
+    initialAttachments = widget.initialAttachments;
+    textController = widget.textController;
+    subjectTextController = widget.subjectTextController;
+    sendMessage = widget.sendMessage;
+
+    // add a listener to recorderController to update isRecordingNotifier
+    recorderController?.addListener(() {
+      isRecordingNotifier.value = recorderController?.isRecording ?? false;
+    });
+  }
+
+  @override
+  void dispose() {
+    // dispose of the ValueNotifier when the state is disposed
+    isRecordingNotifier.dispose();
+    super.dispose();
+  }
+
   bool get iOS => ss.settings.skin.value == Skins.iOS;
 
   bool get samsung => ss.settings.skin.value == Skins.Samsung;
@@ -823,11 +851,14 @@ class TextFieldComponent extends StatelessWidget {
       onKeyEvent: (_, ev) => handleKey(_, ev, context, isChatCreator),
       child: Padding(
         padding: const EdgeInsets.only(right: 5.0),
-        child: Container(
+        child: ValueListenableBuilder<bool>(
+        valueListenable: isRecordingNotifier,
+        builder: (context, isRecording, child) {
+        return Container(
           decoration: iOS
               ? BoxDecoration(
                   border: Border.fromBorderSide(BorderSide(
-                    color: context.theme.colorScheme.properSurface,
+                    color: (isRecording & iOS) ? CupertinoDynamicColor.resolve(iOSVoiceRecorderBackgroundColor, context) : context.theme.colorScheme.properSurface,
                     width: 1.5,
                   )),
                   borderRadius: BorderRadius.circular(20),
@@ -956,13 +987,14 @@ class TextFieldComponent extends StatelessWidget {
                     enabledBorder: InputBorder.none,
                     border: InputBorder.none,
                     focusedBorder: InputBorder.none,
-                    fillColor: Colors.transparent,
+                    filled: (isRecording & iOS),
+                    fillColor: (isRecording & iOS) ? CupertinoDynamicColor.resolve(iOSVoiceRecorderBackgroundColor, context) : Colors.transparent,
                     hintStyle: context.theme.extension<BubbleText>()!.bubbleText.copyWith(color: context.theme.colorScheme.outline),
                     suffixIconConstraints: const BoxConstraints(minHeight: 0),
                     suffixIcon: samsung && !isChatCreator
                         ? null
                         : Padding(
-                            padding: EdgeInsets.only(right: iOS ? 0.0 : 5.0),
+                            padding: EdgeInsets.only(right: 5.0),
                             child: TextFieldSuffix(
                               subjectTextController: subjectTextController,
                               textController: textController,
@@ -1073,6 +1105,8 @@ class TextFieldComponent extends StatelessWidget {
               ],
             ),
           ),
+        );
+        }
         ),
       ),
     );

lib/app/layouts/conversation_view/widgets/text_field/text_field_suffix.dart

@@ -1,9 +1,11 @@
 
 import 'package:audio_waveforms/audio_waveforms.dart';
+import 'package:bluebubbles/app/components/custom/custom_waveform_icon.dart';
 import 'package:bluebubbles/app/components/custom_text_editing_controllers.dart';
 import 'package:bluebubbles/app/layouts/conversation_view/widgets/message/attachment/audio_player.dart';
 import 'package:bluebubbles/app/layouts/conversation_view/widgets/text_field/send_button.dart';
 import 'package:bluebubbles/app/layouts/conversation_view/widgets/effects/send_effect_picker.dart';
+import 'package:bluebubbles/app/layouts/conversation_view/colors/voice_message_recorder_colors.dart';
 import 'package:bluebubbles/app/wrappers/cupertino_icon_wrapper.dart';
 import 'package:bluebubbles/app/wrappers/stateful_boilerplate.dart';
 import 'package:bluebubbles/helpers/helpers.dart';
@@ -73,7 +75,7 @@ class _TextFieldSuffixState extends OptimizedState<TextFieldSuffix> {
                       ? null
                       : !isChatCreator && !showRecording
                       ? context.theme.colorScheme.outline
-                      : context.theme.colorScheme.primary,
+                      : CupertinoDynamicColor.resolve(iOSStopIconBackground, context),
                   shape: const CircleBorder(),
                   padding: const EdgeInsets.all(0),
                   maximumSize: kIsDesktop ? const Size(40, 40) : const Size(32, 32),
@@ -83,12 +85,12 @@ class _TextFieldSuffixState extends OptimizedState<TextFieldSuffix> {
                 child: isLinuxArm64 ? const SizedBox(height: 40) :
                   !isChatCreator && !showRecording
                   ? CupertinoIconWrapper(icon: Icon(
-                    iOS ? CupertinoIcons.mic : Icons.mic_none,
-                    color: iOS ? context.theme.colorScheme.outline : context.theme.colorScheme.properOnSurface,
-                    size: 20,
+                    iOS ? WaveformIconData(0xe800) : Icons.mic_none,
+                    color: iOS ? CupertinoDynamicColor.resolve(iOSStopIconColor, context) : context.theme.colorScheme.properOnSurface,
+                    size: iOS ? 17 : 20,
                   )) : CupertinoIconWrapper(icon: Icon(
                     iOS ? CupertinoIcons.stop_fill : Icons.stop_circle,
-                    color: iOS ? context.theme.colorScheme.onPrimary : context.theme.colorScheme.properOnSurface,
+                    color: iOS ? CupertinoDynamicColor.resolve(iOSWavesColor, context) : context.theme.colorScheme.properOnSurface,
                     size: 15,
                   )),
                 onPressed: () async {

lib/app/layouts/conversation_view/widgets/text_field/voice_message_recorder.dart

@@ -0,0 +1,113 @@
+import 'dart:async';
+
+import 'package:bluebubbles/app/layouts/conversation_view/colors/voice_message_recorder_colors.dart';
+import 'package:audio_waveforms/audio_waveforms.dart';
+import 'package:bluebubbles/helpers/helpers.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+
+class VoiceMessageRecorder extends StatefulWidget {
+  const VoiceMessageRecorder({
+    super.key,
+    required this.recorderController,
+    required this.textFieldSize,
+    required this.iOS,
+    required this.samsung,
+  });
+
+  final RecorderController? recorderController;
+
+  final Size textFieldSize;
+
+  final bool iOS;
+
+  final bool samsung;
+
+  @override
+  _VoiceMessageRecorderState createState() => _VoiceMessageRecorderState();
+}
+
+class _VoiceMessageRecorderState extends State<VoiceMessageRecorder> {
+  late Stream<Duration> recordingDurationStream;
+
+  @override
+  void initState() {
+    recordingDurationStream = widget.recorderController!.onCurrentDuration;
+
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+        padding: const EdgeInsets.only(left: 1),
+        child: Row(
+          children: [
+            AudioWaveforms(
+              size: Size(
+                  widget.textFieldSize.width - getWidth(widget.iOS, widget.samsung),
+                  widget.textFieldSize.height - 15),
+              recorderController: widget.recorderController!,
+              padding: EdgeInsets.symmetric(vertical: 5, horizontal: widget.iOS ? 10 : 15), // need extra spacing in case of iOS for recording duration
+              waveStyle: WaveStyle(
+                waveColor: widget.iOS ? iOSWavesColor : Colors.white,
+                waveCap: StrokeCap.square,
+                spacing: 4.0,
+                showBottom: true,
+                extendWaveform: true,
+                showMiddleLine: false,
+              ),
+              decoration: BoxDecoration(
+                border: Border.fromBorderSide(BorderSide(
+                  color: widget.iOS
+                      ? CupertinoDynamicColor.resolve(iOSVoiceRecorderBackgroundColor, context)
+                      : context.theme.colorScheme.outline,
+                  width: 1,
+                )),
+                borderRadius: BorderRadius.circular(20),
+                color: widget.iOS
+                    ? CupertinoDynamicColor.resolve(iOSVoiceRecorderBackgroundColor, context)
+                    : context.theme.colorScheme.properSurface,
+              ),
+            ),
+            Visibility(
+              visible: widget.iOS,
+              child: Center(
+              child: StreamBuilder<Duration>(
+                stream: recordingDurationStream,
+                builder: (context, snapshot) {
+                  if (snapshot.hasData) {
+                    final minutes = snapshot.data!.inMinutes;
+
+                    final seconds = (snapshot.data!.inSeconds % 60)
+                        .toString()
+                        .padLeft(2, '0');
+
+                    return Text(
+                      '$minutes:$seconds',
+                      style: TextStyle(color: Color(0xFFff6f61)),
+                    );
+                  } else {
+                    return Container();
+                  }
+                },
+              ),
+            ),
+          ),
+          ],
+        ));
+  }
+
+  int getWidth(bool iOS, bool samsung){
+    if (samsung){
+      // width for samsung style
+      return 0;
+    } else if (iOS){
+      return 105;
+    }
+    // for material
+    return 80;
+  }
+}

pubspec.yaml

@@ -228,10 +228,10 @@ flutter_native_splash:
 
 # The following section is specific to Flutter.
 flutter:
-  # fonts:
-  # - family: AppleColorEmoji
-  #   fonts:
-  #     - asset: assets/fonts/AppleColorEmoji.ttf
+  fonts:
+  - family: WaveformIcon
+    fonts:
+      - asset: assets/fonts/WaveformIcon.ttf
 
   # The following line ensures that the Material Icons font is
   # included with your application, so that you can use the icons in