重构录制页面，优化 UI 组件，简化状态管理，移除不必要的参数，提升代码可读性和维护性。

lib/features/recording/pages/page_record.dart

@@ -239,32 +239,13 @@ class _RecordingPageState extends ConsumerState<RecordingPage> {
   @override
   /// 构建录制页 UI
   Widget build(BuildContext context) {
-    final recordingInfo = ref.watch(recordingViewModelProvider);
+    return _RecordingPopScope(
-    final state = recordingInfo.session;
+      onExitRecordingMode: _exitRecordingMode,
-    final viewModel = ref.read(recordingViewModelProvider.notifier);
-    final clipboard = recordingInfo.clipboardRecordingModel;
-    final showClipboardInfo = recordingInfo.hasValidClipboardInfo;
-
-    return PopScope(
-      canPop: !state.isRecording,
-      onPopInvokedWithResult: (didPop, result) async {
-        if (didPop) {
-          await _exitRecordingMode();
-          return;
-        }
-        if (state.isRecording) {
-          AppToast.show('录制中无法返回，请先停止录制');
-        }
-      },
       child: Scaffold(
         backgroundColor: Colors.black,
         body: Column(
           children: [
-            RecordHeaderWidget(
+            _RecordHeaderSection(
-              hasValidClipboardInfo: showClipboardInfo,
-              eventTitle: showClipboardInfo ? clipboard.title : null,
-              isRecording: state.isRecording,
-              elapsedLabel: state.elapsedLabel,
               onPasteEventInfo: _pasteEventInfo,
               onClearEventInfo: _clearClipboardForNewRound,
             ),
@@ -272,45 +253,16 @@ class _RecordingPageState extends ConsumerState<RecordingPage> {
               child: Stack(
                 children: [
                   const CameraPreviewWidget(),
-                  if (!state.isPreviewReady && state.errorMessage == null)
+                  const _PreviewLoadingLayer(),
-                    const RecordingLoadingOverlayWidget(message: '正在启动相机…'),
                   const RecordTimerWidget(),
-                  RepaintBoundary(
+                  _RecordingHudLayer(
-                    child: RecordingHudWidget(
+                    onStart: _onStartRecording,
-                      state: state,
+                    onStop: _stopRecordingAndShowResult,
-                      showClipboardHint: showClipboardInfo,
-                      clipboardAddress: clipboard.address.trim(),
-                      onStart: _onStartRecording,
-                      onStop: _stopRecordingAndShowResult,
-                      onOpenDnd: () async {
-                        await viewModel.openDndSettings();
-                        await viewModel.refreshDndAccess();
-                      },
-                      onOpenBattery: () async {
-                        await viewModel.openBatterySettings();
-                        await viewModel.refreshBatteryOptimization();
-                      },
-                      onToggleTouchLock: () {
-                        viewModel.setTouchLocked(!state.isTouchLocked);
-                      },
-                    ),
                   ),
-                  if (state.isTouchLocked && state.isRecording)
+                  _TouchLockOverlayLayer(
-                    RecordingTouchLockOverlayWidget(
+                    onStopRecording: _stopRecordingAndShowResult,
-                      enabled: true,
+                  ),
-                      onUnlocked: (intent) async {
+                  const _StartingRecordingOverlay(),
-                        viewModel.setTouchLocked(false);
-                        if (intent ==
-                            RecordingTouchLockUnlockIntent.stopRecording) {
-                          await _stopRecordingAndShowResult();
-                        }
-                      },
-                    ),
-                  if (state.isStartingRecording)
-                    RecordingLoadingOverlayWidget(
-                      message: '正在开始录制…',
-                      backgroundColor: Colors.black.withValues(alpha: 0.24),
-                    ),
                 ],
               ),
             ),
@@ -321,3 +273,207 @@ class _RecordingPageState extends ConsumerState<RecordingPage> {
     );
   }
 }
+
+class _RecordingPopScope extends ConsumerWidget {
+  const _RecordingPopScope({
+    required this.onExitRecordingMode,
+    required this.child,
+  });
+
+  final Future<void> Function() onExitRecordingMode;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isRecording = ref.watch(
+      recordingViewModelProvider.select((m) => m.session.isRecording),
+    );
+
+    return PopScope(
+      canPop: !isRecording,
+      onPopInvokedWithResult: (didPop, result) async {
+        if (didPop) {
+          await onExitRecordingMode();
+          return;
+        }
+        if (isRecording) {
+          AppToast.show('录制中无法返回，请先停止录制');
+        }
+      },
+      child: child,
+    );
+  }
+}
+
+class _RecordHeaderSection extends ConsumerWidget {
+  const _RecordHeaderSection({
+    required this.onPasteEventInfo,
+    required this.onClearEventInfo,
+  });
+
+  final Future<void> Function() onPasteEventInfo;
+  final VoidCallback onClearEventInfo;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final headerState = ref.watch(
+      recordingViewModelProvider.select(
+        (m) => (
+          m.hasValidClipboardInfo,
+          m.hasValidClipboardInfo ? m.clipboardRecordingModel.title : null,
+          m.session.isRecording,
+        ),
+      ),
+    );
+    final (hasValidClipboardInfo, eventTitle, isRecording) = headerState;
+
+    return RecordHeaderWidget(
+      hasValidClipboardInfo: hasValidClipboardInfo,
+      eventTitle: eventTitle,
+      isRecording: isRecording,
+      onPasteEventInfo: onPasteEventInfo,
+      onClearEventInfo: onClearEventInfo,
+    );
+  }
+}
+
+class _PreviewLoadingLayer extends ConsumerWidget {
+  const _PreviewLoadingLayer();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final showLoading = ref.watch(
+      recordingViewModelProvider.select(
+        (m) => !m.session.isPreviewReady && m.session.errorMessage == null,
+      ),
+    );
+
+    if (!showLoading) {
+      return const SizedBox.shrink();
+    }
+
+    return const RecordingLoadingOverlayWidget(message: '正在启动相机…');
+  }
+}
+
+class _RecordingHudLayer extends ConsumerWidget {
+  const _RecordingHudLayer({
+    required this.onStart,
+    required this.onStop,
+  });
+
+  final Future<void> Function() onStart;
+  final Future<void> Function() onStop;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final hudState = ref.watch(
+      recordingViewModelProvider.select(
+        (m) => (
+          m.session.errorMessage,
+          m.session.permissionWarning,
+          m.session.hasDndAccess,
+          m.session.isBatteryOptimizedIgnored,
+          m.session.notificationsGranted,
+          m.session.isRecording,
+          m.session.isStartingRecording,
+          m.session.isTouchLocked,
+          m.hasValidClipboardInfo,
+          m.clipboardRecordingModel.address.trim(),
+        ),
+      ),
+    );
+    final (
+      errorMessage,
+      permissionWarning,
+      hasDndAccess,
+      isBatteryOptimizedIgnored,
+      notificationsGranted,
+      isRecording,
+      isStartingRecording,
+      isTouchLocked,
+      showClipboardHint,
+      clipboardAddress,
+    ) = hudState;
+    final viewModel = ref.read(recordingViewModelProvider.notifier);
+
+    return RecordingHudWidget(
+      errorMessage: errorMessage,
+      permissionWarning: permissionWarning,
+      hasDndAccess: hasDndAccess,
+      isBatteryOptimizedIgnored: isBatteryOptimizedIgnored,
+      notificationsGranted: notificationsGranted,
+      isRecording: isRecording,
+      isStartingRecording: isStartingRecording,
+      isTouchLocked: isTouchLocked,
+      showClipboardHint: showClipboardHint,
+      clipboardAddress: clipboardAddress,
+      onStart: onStart,
+      onStop: onStop,
+      onOpenDnd: () async {
+        await viewModel.openDndSettings();
+        await viewModel.refreshDndAccess();
+      },
+      onOpenBattery: () async {
+        await viewModel.openBatterySettings();
+        await viewModel.refreshBatteryOptimization();
+      },
+      onToggleTouchLock: () {
+        final locked = ref.read(recordingViewModelProvider).session.isTouchLocked;
+        viewModel.setTouchLocked(!locked);
+      },
+    );
+  }
+}
+
+class _TouchLockOverlayLayer extends ConsumerWidget {
+  const _TouchLockOverlayLayer({required this.onStopRecording});
+
+  final Future<void> Function() onStopRecording;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final overlayState = ref.watch(
+      recordingViewModelProvider.select(
+        (m) => (m.session.isTouchLocked, m.session.isRecording),
+      ),
+    );
+    final (isTouchLocked, isRecording) = overlayState;
+
+    if (!isTouchLocked || !isRecording) {
+      return const SizedBox.shrink();
+    }
+
+    final viewModel = ref.read(recordingViewModelProvider.notifier);
+
+    return RecordingTouchLockOverlayWidget(
+      enabled: true,
+      onUnlocked: (intent) async {
+        viewModel.setTouchLocked(false);
+        if (intent == RecordingTouchLockUnlockIntent.stopRecording) {
+          await onStopRecording();
+        }
+      },
+    );
+  }
+}
+
+class _StartingRecordingOverlay extends ConsumerWidget {
+  const _StartingRecordingOverlay();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isStartingRecording = ref.watch(
+      recordingViewModelProvider.select((m) => m.session.isStartingRecording),
+    );
+
+    if (!isStartingRecording) {
+      return const SizedBox.shrink();
+    }
+
+    return RecordingLoadingOverlayWidget(
+      message: '正在开始录制…',
+      backgroundColor: Colors.black.withValues(alpha: 0.24),
+    );
+  }
+}

lib/features/recording/widgets/widget_record_header.dart

@@ -12,7 +12,6 @@ class RecordHeaderWidget extends StatelessWidget {
     required this.hasValidClipboardInfo,
     this.eventTitle,
     required this.isRecording,
-    required this.elapsedLabel,
     required this.onPasteEventInfo,
     required this.onClearEventInfo,
   });
@@ -20,7 +19,6 @@ class RecordHeaderWidget extends StatelessWidget {
   final bool hasValidClipboardInfo;
   final String? eventTitle;
   final bool isRecording;
-  final String elapsedLabel;
   final Future<void> Function() onPasteEventInfo;
   final VoidCallback onClearEventInfo;
 

lib/features/recording/widgets/widget_record_timer.dart

@@ -13,18 +13,22 @@ class RecordTimerWidget extends ConsumerStatefulWidget {
 class _RecordTimerWidgetState extends ConsumerState<RecordTimerWidget> {
   @override
   Widget build(BuildContext context) {
-    final session = ref.watch(
+    final timerState = ref.watch(
-      recordingViewModelProvider.select((value) => value.session),
+      recordingViewModelProvider.select(
+        (m) => (m.session.isRecording, m.session.elapsedLabel),
+      ),
     );
-    final isRecording = session.isRecording;
+    final (isRecording, elapsedLabel) = timerState;
-    final displayTime = isRecording ? session.elapsedLabel : '00:00:00';
+    final displayTime = isRecording ? elapsedLabel : '00:00:00';
 
     return Positioned(
       top: 13.r,
       left: 0,
       right: 0,
       child: Center(
-        child: Container(
+        child: AnimatedContainer(
+          duration: const Duration(milliseconds: 380),
+          curve: Curves.easeOutCubic,
           padding: EdgeInsets.symmetric(horizontal: 5.r, vertical: 0.r),
           decoration: BoxDecoration(
             color: isRecording ? Colors.red : Colors.transparent,

lib/features/recording/widgets/widget_recording_button.dart

@@ -1,62 +1,164 @@
+import 'dart:ui' show lerpDouble;
+
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 
 /// 录制控制按钮：白圈 + 红色内芯，录制中为圆角矩形。
-class RecordingControlButton extends StatelessWidget {
+class RecordingControlButton extends StatefulWidget {
   const RecordingControlButton({
     super.key,
     required this.isRecording,
     required this.onTap,
+    this.isStartingRecording = false,
     this.enabled = true,
     this.size,
   });
 
   final bool isRecording;
+  final bool isStartingRecording;
   final VoidCallback? onTap;
   final bool enabled;
   final double? size;
 
+  @override
+  State<RecordingControlButton> createState() => _RecordingControlButtonState();
+}
+
+class _RecordingControlButtonState extends State<RecordingControlButton>
+    with TickerProviderStateMixin {
+  static const _morphDuration = Duration(milliseconds: 380);
+  static const _pressDownDuration = Duration(milliseconds: 120);
+  static const _pressUpDuration = Duration(milliseconds: 180);
+
+  late final AnimationController _morphController;
+  late final AnimationController _pressController;
+  late final CurvedAnimation _morphAnimation;
+  late final Animation<double> _pressScale;
+
+  bool get _targetIsRecording =>
+      widget.isRecording || widget.isStartingRecording;
+
+  @override
+  void initState() {
+    super.initState();
+    _morphController = AnimationController(
+      vsync: this,
+      duration: _morphDuration,
+      value: _targetIsRecording ? 1 : 0,
+    );
+    _morphAnimation = CurvedAnimation(
+      parent: _morphController,
+      curve: Curves.easeOutCubic,
+      reverseCurve: Curves.easeInCubic,
+    );
+    _pressController = AnimationController(
+      vsync: this,
+      duration: _pressDownDuration,
+    );
+    _pressScale = Tween<double>(begin: 1, end: 0.94).animate(
+      CurvedAnimation(
+        parent: _pressController,
+        curve: Curves.easeOut,
+        reverseCurve: Curves.easeOutBack,
+      ),
+    );
+  }
+
+  @override
+  void didUpdateWidget(covariant RecordingControlButton oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    final oldTarget =
+        oldWidget.isRecording || oldWidget.isStartingRecording;
+    final newTarget = _targetIsRecording;
+    if (oldTarget != newTarget) {
+      if (newTarget) {
+        _morphController.forward();
+      } else {
+        _morphController.reverse();
+      }
+    }
+  }
+
+  @override
+  void dispose() {
+    _morphAnimation.dispose();
+    _morphController.dispose();
+    _pressController.dispose();
+    super.dispose();
+  }
+
+  void _handlePressDown() {
+    if (!widget.enabled) return;
+    _pressController.duration = _pressDownDuration;
+    _pressController.forward();
+  }
+
+  void _handlePressUp() {
+    if (!widget.enabled) return;
+    _pressController.duration = _pressUpDuration;
+    _pressController.reverse();
+  }
+
   @override
   Widget build(BuildContext context) {
-    final buttonSize = size ?? 70.r;
+    final buttonSize = widget.size ?? 70.r;
     final borderWidth = 4.r;
     final idleInnerSize = 62.r;
     final recordingInnerSize = 22.r;
+    final idleCornerRadius = idleInnerSize / 2;
     final recordingCornerRadius = 6.r;
 
-    final innerSize = isRecording ? recordingInnerSize : idleInnerSize;
-    final borderRadius = isRecording
-        ? recordingCornerRadius
-        : idleInnerSize / 2;
-
     return GestureDetector(
-      onTap: enabled ? onTap : null,
+      behavior: HitTestBehavior.opaque,
-      child: SizedBox(
+      onTapDown: (_) => _handlePressDown(),
-        width: buttonSize,
+      onTapUp: (_) => _handlePressUp(),
-        height: buttonSize,
+      onTapCancel: _handlePressUp,
-        child: Stack(
+      onTap: widget.enabled ? widget.onTap : null,
-          alignment: Alignment.center,
+      child: AnimatedBuilder(
-          children: [
+        animation: Listenable.merge([_morphController, _pressController]),
-            Container(
+        builder: (context, child) {
+          final morph = _morphAnimation.value;
+
+          final innerSize = lerpDouble(
+            idleInnerSize,
+            recordingInnerSize,
+            morph,
+          )!;
+          final cornerRadius = lerpDouble(
+            idleCornerRadius,
+            recordingCornerRadius,
+            morph,
+          )!;
+
+          return Transform.scale(
+            scale: _pressScale.value,
+            child: SizedBox(
               width: buttonSize,
               height: buttonSize,
-              decoration: BoxDecoration(
+              child: Stack(
-                shape: BoxShape.circle,
+                alignment: Alignment.center,
-                border: Border.all(color: Colors.white, width: borderWidth),
+                children: [
+                  Container(
+                    width: buttonSize,
+                    height: buttonSize,
+                    decoration: BoxDecoration(
+                      shape: BoxShape.circle,
+                      border: Border.all(color: Colors.white, width: borderWidth),
+                    ),
+                  ),
+                  Container(
+                    width: innerSize,
+                    height: innerSize,
+                    decoration: BoxDecoration(
+                      color: Colors.red,
+                      borderRadius: BorderRadius.circular(cornerRadius),
+                    ),
+                  ),
+                ],
               ),
             ),
-            AnimatedContainer(
+          );
-              duration: const Duration(milliseconds: 500),
+        },
-              curve: Curves.ease,
-              width: innerSize,
-              height: innerSize,
-              decoration: BoxDecoration(
-                color: Colors.red,
-                borderRadius: BorderRadius.circular(borderRadius),
-              ),
-            ),
-          ],
-        ),
       ),
     );
   }

lib/features/recording/widgets/widget_recording_hud.dart

@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:permission_handler/permission_handler.dart';
 import 'package:recording_tool/core/utils/rate_limiter.dart';
-import 'package:recording_tool/features/recording/model/model_recording_session.dart';
 import 'package:recording_tool/features/recording/widgets/record_content_transition.dart';
 import 'package:recording_tool/features/recording/widgets/widget_clipboard_address_clock_chip.dart';
 import 'package:recording_tool/features/recording/widgets/widget_recording_button.dart';
@@ -12,7 +11,14 @@ import 'package:recording_tool/features/recording/widgets/widget_recording_setup
 class RecordingHudWidget extends StatelessWidget {
   const RecordingHudWidget({
     super.key,
-    required this.state,
+    this.errorMessage,
+    this.permissionWarning,
+    required this.hasDndAccess,
+    required this.isBatteryOptimizedIgnored,
+    required this.notificationsGranted,
+    required this.isRecording,
+    required this.isStartingRecording,
+    required this.isTouchLocked,
     this.showClipboardHint = false,
     this.clipboardAddress = '',
     required this.onStart,
@@ -22,7 +28,14 @@ class RecordingHudWidget extends StatelessWidget {
     required this.onToggleTouchLock,
   });
 
-  final RecordingSessionState state;
+  final String? errorMessage;
+  final String? permissionWarning;
+  final bool hasDndAccess;
+  final bool isBatteryOptimizedIgnored;
+  final bool notificationsGranted;
+  final bool isRecording;
+  final bool isStartingRecording;
+  final bool isTouchLocked;
   final bool showClipboardHint;
   final String clipboardAddress;
   final Future<void> Function() onStart;
@@ -50,23 +63,23 @@ class RecordingHudWidget extends StatelessWidget {
             children: [
               SizedBox(height: 8.h),
               const Spacer(),
-              if (state.errorMessage != null)
+              if (errorMessage != null)
                 Padding(
                   padding: EdgeInsets.all(12.r),
                   child: Text(
-                    state.errorMessage!,
+                    errorMessage!,
                     style: const TextStyle(color: Colors.amber),
                     textAlign: TextAlign.center,
                   ),
                 ),
-              if (state.permissionWarning != null)
+              if (permissionWarning != null)
                 Padding(
                   padding: EdgeInsets.symmetric(
                     horizontal: 16.r,
                     vertical: 8.r,
                   ),
                   child: Text(
-                    state.permissionWarning!,
+                    permissionWarning!,
                     style: TextStyle(
                       color: Colors.orangeAccent,
                       fontSize: 12.sp,
@@ -75,9 +88,9 @@ class RecordingHudWidget extends StatelessWidget {
                   ),
                 ),
               RecordingSetupHintsWidget(
-                hasDndAccess: state.hasDndAccess,
+                hasDndAccess: hasDndAccess,
-                isBatteryIgnored: state.isBatteryOptimizedIgnored,
+                isBatteryIgnored: isBatteryOptimizedIgnored,
-                notificationsGranted: state.notificationsGranted,
+                notificationsGranted: notificationsGranted,
                 onOpenDnd: onOpenDnd,
                 onOpenBattery: onOpenBattery,
                 onOpenNotificationSettings: openAppSettings,
@@ -102,7 +115,7 @@ class RecordingHudWidget extends StatelessWidget {
                 : const SizedBox.shrink(key: ValueKey('clipboard-info-hidden')),
           ),
         ),
-        if (state.isRecording)
+        if (isRecording)
           Positioned(
             left: 16.r,
             bottom: _recordButtonBottom,
@@ -112,7 +125,7 @@ class RecordingHudWidget extends StatelessWidget {
                 child: IconButton(
                   onPressed: onToggleTouchLock,
                   icon: Icon(
-                    state.isTouchLocked ? Icons.lock : Icons.lock_open,
+                    isTouchLocked ? Icons.lock : Icons.lock_open,
                     color: Colors.white,
                     size: 28.r,
                   ),
@@ -126,11 +139,12 @@ class RecordingHudWidget extends StatelessWidget {
           bottom: _recordButtonBottom,
           child: Center(
             child: RecordingControlButton(
-              isRecording: state.isRecording,
+              isRecording: isRecording,
-              enabled: !state.isStartingRecording,
+              isStartingRecording: isStartingRecording,
+              enabled: !isStartingRecording,
               size: _recordButtonSize,
               onTap: () {
-                if (state.isRecording) {
+                if (isRecording) {
                   RateLimit.instance.debounce<void>(
                     key: 'recording.session.stop',
                     value: null,

test/features/recording/widget_record_header_test.dart

@@ -20,7 +20,6 @@ void main() {
                 hasValidClipboardInfo: hasValidClipboardInfo,
                 eventTitle: eventTitle,
                 isRecording: false,
-                elapsedLabel: '00:00',
                 onPasteEventInfo: () async {},
                 onClearEventInfo: () {},
               ),

test/features/recording/widget_recording_button_test.dart

@@ -0,0 +1,138 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:recording_tool/features/recording/widgets/widget_recording_button.dart';
+
+void main() {
+  const designSize = Size(375, 812);
+  const morphDuration = Duration(milliseconds: 380);
+
+  Future<void> pumpButton(
+    WidgetTester tester, {
+    required bool isRecording,
+    bool isStartingRecording = false,
+  }) async {
+    await tester.pumpWidget(
+      ScreenUtilInit(
+        designSize: designSize,
+        builder: (context, _) {
+          return MaterialApp(
+            home: Scaffold(
+              body: Center(
+                child: RecordingControlButton(
+                  isRecording: isRecording,
+                  isStartingRecording: isStartingRecording,
+                  onTap: () {},
+                ),
+              ),
+            ),
+          );
+        },
+      ),
+    );
+    await tester.pump();
+  }
+
+  Size innerCoreSize(WidgetTester tester) {
+    final finder = find.byWidgetPredicate(
+      (widget) =>
+          widget is Container &&
+          widget.decoration is BoxDecoration &&
+          (widget.decoration! as BoxDecoration).color == Colors.red,
+    );
+    return tester.getSize(finder);
+  }
+
+  testWidgets('idle state uses large circular inner core', (tester) async {
+    await pumpButton(tester, isRecording: false);
+
+    final size = innerCoreSize(tester);
+    expect(size.width, closeTo(62.r, 0.5));
+    expect(size.height, closeTo(62.r, 0.5));
+  });
+
+  testWidgets('isStartingRecording morphs to stop square before isRecording', (
+    tester,
+  ) async {
+    await pumpButton(
+      tester,
+      isRecording: false,
+      isStartingRecording: true,
+    );
+
+    await tester.pump(morphDuration);
+    await tester.pump();
+
+    final size = innerCoreSize(tester);
+    expect(size.width, closeTo(22.r, 0.5));
+    expect(size.height, closeTo(22.r, 0.5));
+  });
+
+  testWidgets('isRecording forward and reverse morph without errors', (
+    tester,
+  ) async {
+    await pumpButton(tester, isRecording: false);
+
+    await tester.pumpWidget(
+      ScreenUtilInit(
+        designSize: designSize,
+        builder: (context, _) {
+          return MaterialApp(
+            home: Scaffold(
+              body: Center(
+                child: RecordingControlButton(
+                  isRecording: true,
+                  onTap: () {},
+                ),
+              ),
+            ),
+          );
+        },
+      ),
+    );
+    await tester.pump(morphDuration);
+    await tester.pump();
+
+    expect(innerCoreSize(tester).width, closeTo(22.r, 0.5));
+
+    await tester.pumpWidget(
+      ScreenUtilInit(
+        designSize: designSize,
+        builder: (context, _) {
+          return MaterialApp(
+            home: Scaffold(
+              body: Center(
+                child: RecordingControlButton(
+                  isRecording: false,
+                  onTap: () {},
+                ),
+              ),
+            ),
+          );
+        },
+      ),
+    );
+    await tester.pump(morphDuration);
+    await tester.pump();
+
+    expect(innerCoreSize(tester).width, closeTo(62.r, 0.5));
+  });
+
+  testWidgets('failed start rolls morph back to idle circle', (tester) async {
+    await pumpButton(
+      tester,
+      isRecording: false,
+      isStartingRecording: true,
+    );
+    await tester.pump(morphDuration);
+    await tester.pump();
+
+    expect(innerCoreSize(tester).width, closeTo(22.r, 0.5));
+
+    await pumpButton(tester, isRecording: false, isStartingRecording: false);
+    await tester.pump(morphDuration);
+    await tester.pump();
+
+    expect(innerCoreSize(tester).width, closeTo(62.r, 0.5));
+  });
+}