feat(ui): Make cancelling a recording also possible via dragging

lib/ui/bloc/conversation_bloc.dart

@@ -2,6 +2,7 @@ import 'dart:async';
 import 'package:bloc/bloc.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter/widgets.dart';
+import 'package:flutter_vibrate/flutter_vibrate.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
 import 'package:get_it/get_it.dart';
 import 'package:moxlib/moxlib.dart';
@@ -435,13 +436,12 @@ class ConversationBloc extends Bloc<ConversationEvent, ConversationState> {
   }
 
   Future<void> _onSendButtonLocked(SendButtonLockedEvent event, Emitter<ConversationState> emit) async {
+    Vibrate.feedback(FeedbackType.light);
+
     emit(state.copyWith(isLocked: true));
   }
 
   Future<void> _onSendButtonLockPressed(SendButtonLockPressedEvent event, Emitter<ConversationState> emit) async {
-    // TODO(PapaTutuWawa): Actually send the recording
-    // TODO(PapaTutuWawa): Actually send the recording
-    // TODO(PapaTutuWawa): Actually send the recording
     // TODO(PapaTutuWawa): Actually send the recording
     emit(
       state.copyWith(
@@ -453,6 +453,8 @@ class ConversationBloc extends Bloc<ConversationEvent, ConversationState> {
   }
 
   Future<void> _onRecordingCanceled(RecordingCanceledEvent event, Emitter<ConversationState> emit) async {
+    Vibrate.feedback(FeedbackType.heavy);
+
     emit(
       state.copyWith(
         isLocked: false,

lib/ui/pages/conversation/bottom.dart

@@ -283,11 +283,6 @@ class ConversationBottomRowState extends State<ConversationBottomRow> {
                       SendButtonDragEndedEvent(),
                     );
                   },
-                  onDragCompleted: () {
-                    context.read<ConversationBloc>().add(
-                      SendButtonLockedEvent(),
-                    );
-                  },
                   feedback: SizedBox(
                     height: 45,
                     width: 45,
@@ -359,17 +354,19 @@ class ConversationBottomRowState extends State<ConversationBottomRow> {
               return AnimatedOpacity(
                 opacity: state.isRecording ? 1 : 0,
                 duration: const Duration(milliseconds: 300),
-                child: SizedBox(
-                  height: 38,
-                  child: DecoratedBox(
-                    decoration: BoxDecoration(
-                      borderRadius: BorderRadius.circular(textfieldRadiusConversation),
-                      color: Theme.of(context).scaffoldBackgroundColor,
-                    ),
-                    // NOTE: We use a comprehension here so that the widget gets
-                    //       created and destroyed to prevent the timer from running
-                    //       until the user closes the page.
-                    child: state.isRecording ?
+                child: IgnorePointer(
+                  ignoring: !state.isRecording,
+                  child: SizedBox(
+                    height: 38,
+                    child: DecoratedBox(
+                      decoration: BoxDecoration(
+                        borderRadius: BorderRadius.circular(textfieldRadiusConversation),
+                        color: Theme.of(context).scaffoldBackgroundColor,
+                      ),
+                      // NOTE: We use a comprehension here so that the widget gets
+                      //       created and destroyed to prevent the timer from running
+                      //       until the user closes the page.
+                      child: state.isRecording ?
                       const Align(
                         alignment: Alignment.centerLeft,
                         child: Padding(
@@ -378,6 +375,7 @@ class ConversationBottomRowState extends State<ConversationBottomRow> {
                         ),
                       ) :
                       null,
+                    ),
                   ),
                 ),
               );

lib/ui/pages/conversation/conversation.dart

@@ -460,11 +460,16 @@ class ConversationPageState extends State<ConversationPage> with TickerProviderS
 
           Positioned(
             right: 8,
-            bottom: 300,
+            bottom: 250,
             child: BlocBuilder<ConversationBloc, ConversationState>(
               builder: (context, state) {
                 return DragTarget<int>(
                   onWillAccept: (data) => true,
+                  onAccept: (_) {
+                    context.read<ConversationBloc>().add(
+                      SendButtonLockedEvent(),
+                    );
+                  },
                   builder: (context, _, __) {
                     return AnimatedScale(
                       scale: state.isDragging || state.isLocked ? 1 : 0,
@@ -497,29 +502,39 @@ class ConversationPageState extends State<ConversationPage> with TickerProviderS
           ),
 
           Positioned(
-            right: 8 + 45 + 32,
-            bottom: 300,
+            right: 8,
+            bottom: 380,
             child: BlocBuilder<ConversationBloc, ConversationState>(
               builder: (context, state) {
-                return AnimatedScale(
-                  scale: state.isLocked ? 1 : 0,
-                  duration: const Duration(milliseconds: 200),
-                  child: SizedBox(
-                    height: 45,
-                    width: 45,
-                    child: FloatingActionButton(
-                      heroTag: 'fabCancel',
-                      onPressed: state.isLocked ?
-                        () {
-                          context.read<ConversationBloc>().add(
-                            RecordingCanceledEvent(),
-                          );
-                        } :
-                        null,
-                      backgroundColor: Colors.grey,
-                      child: const Icon(Icons.delete, color: Colors.white),
-                    ),
-                  ),
+                return DragTarget<int>(
+                  onWillAccept: (_) => true,
+                  onAccept: (_) {
+                    context.read<ConversationBloc>().add(
+                      RecordingCanceledEvent(),
+                    );
+                  },
+                  builder: (context, _, __) {
+                    return AnimatedScale(
+                      scale: state.isDragging || state.isLocked ? 1 : 0,
+                      duration: const Duration(milliseconds: 200),
+                      child: SizedBox(
+                        height: 45,
+                        width: 45,
+                        child: FloatingActionButton(
+                          heroTag: 'fabCancel',
+                          onPressed: state.isLocked ?
+                          () {
+                            context.read<ConversationBloc>().add(
+                              RecordingCanceledEvent(),
+                            );
+                          } :
+                          null,
+                          backgroundColor: Colors.grey,
+                          child: const Icon(Icons.delete, color: Colors.white),
+                        ),
+                      ),
+                    );
+                  },
                 );
               },
             ),