2 Commits

7 changed files with 523 additions and 112 deletions

View File

@@ -239,32 +239,13 @@ class _RecordingPageState extends ConsumerState<RecordingPage> {
@override
/// 构建录制页 UI
Widget build(BuildContext context) {
final recordingInfo = ref.watch(recordingViewModelProvider);
final state = recordingInfo.session;
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('录制中无法返回,请先停止录制');
}
},
return _RecordingPopScope(
onExitRecordingMode: _exitRecordingMode,
child: Scaffold(
backgroundColor: Colors.black,
body: Column(
children: [
RecordHeaderWidget(
hasValidClipboardInfo: showClipboardInfo,
eventTitle: showClipboardInfo ? clipboard.title : null,
isRecording: state.isRecording,
elapsedLabel: state.elapsedLabel,
_RecordHeaderSection(
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 RecordingLoadingOverlayWidget(message: '正在启动相机…'),
const _PreviewLoadingLayer(),
const RecordTimerWidget(),
RepaintBoundary(
child: RecordingHudWidget(
state: state,
showClipboardHint: showClipboardInfo,
clipboardAddress: clipboard.address.trim(),
_RecordingHudLayer(
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);
},
),
_TouchLockOverlayLayer(
onStopRecording: _stopRecordingAndShowResult,
),
if (state.isTouchLocked && state.isRecording)
RecordingTouchLockOverlayWidget(
enabled: true,
onUnlocked: (intent) async {
viewModel.setTouchLocked(false);
if (intent ==
RecordingTouchLockUnlockIntent.stopRecording) {
await _stopRecordingAndShowResult();
}
},
),
if (state.isStartingRecording)
RecordingLoadingOverlayWidget(
message: '正在开始录制…',
backgroundColor: Colors.black.withValues(alpha: 0.24),
),
const _StartingRecordingOverlay(),
],
),
),
@@ -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),
);
}
}

View File

@@ -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;

View File

@@ -13,18 +13,22 @@ class RecordTimerWidget extends ConsumerStatefulWidget {
class _RecordTimerWidgetState extends ConsumerState<RecordTimerWidget> {
@override
Widget build(BuildContext context) {
final session = ref.watch(
recordingViewModelProvider.select((value) => value.session),
final timerState = ref.watch(
recordingViewModelProvider.select(
(m) => (m.session.isRecording, m.session.elapsedLabel),
),
);
final isRecording = session.isRecording;
final displayTime = isRecording ? session.elapsedLabel : '00:00:00';
final (isRecording, elapsedLabel) = timerState;
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,

View File

@@ -1,36 +1,137 @@
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,
onTapDown: (_) => _handlePressDown(),
onTapUp: (_) => _handlePressUp(),
onTapCancel: _handlePressUp,
onTap: widget.enabled ? widget.onTap : null,
child: AnimatedBuilder(
animation: Listenable.merge([_morphController, _pressController]),
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,
@@ -45,19 +146,20 @@ class RecordingControlButton extends StatelessWidget {
border: Border.all(color: Colors.white, width: borderWidth),
),
),
AnimatedContainer(
duration: const Duration(milliseconds: 500),
curve: Curves.ease,
Container(
width: innerSize,
height: innerSize,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(borderRadius),
borderRadius: BorderRadius.circular(cornerRadius),
),
),
],
),
),
);
},
),
);
}
}

View File

@@ -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,
isBatteryIgnored: state.isBatteryOptimizedIgnored,
notificationsGranted: state.notificationsGranted,
hasDndAccess: hasDndAccess,
isBatteryIgnored: isBatteryOptimizedIgnored,
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,
enabled: !state.isStartingRecording,
isRecording: isRecording,
isStartingRecording: isStartingRecording,
enabled: !isStartingRecording,
size: _recordButtonSize,
onTap: () {
if (state.isRecording) {
if (isRecording) {
RateLimit.instance.debounce<void>(
key: 'recording.session.stop',
value: null,

View File

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

View File

@@ -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));
});
}