feat(voice): pulse mic button with live amplitude
VoiceState now carries a normalized mic amplitude (0..1) updated from the existing onAmplitudeChanged subscription, with a 0.02 change threshold so we don't spam rebuilds. VoiceMicButton swaps the constant-rate AnimationController for an AnimatedScale + animated glow driven by the live amplitude. 0.1 floor keeps the button breathing on silence; 120ms ease-out smooths between 200ms samples. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -5,51 +5,29 @@ import '../providers/voice_provider.dart';
|
||||
/// Animated mic button that reflects the current [VoiceMode].
|
||||
///
|
||||
/// - idle: muted background, mic_none icon
|
||||
/// - recording: red with pulsing shadow ring
|
||||
/// - recording: red, pulses with live [amplitude] for real-time feedback
|
||||
/// - transcribing: indigo with spinner
|
||||
/// - playing: indigo with volume_up icon
|
||||
class VoiceMicButton extends StatefulWidget {
|
||||
class VoiceMicButton extends StatelessWidget {
|
||||
final VoiceMode mode;
|
||||
final bool voiceModeActive;
|
||||
/// Live mic amplitude 0.0–1.0 while recording. Drives the button scale
|
||||
/// and glow so the user has obvious feedback that audio is being picked
|
||||
/// up. Ignored when not in [VoiceMode.recording].
|
||||
final double amplitude;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const VoiceMicButton({
|
||||
super.key,
|
||||
required this.mode,
|
||||
required this.voiceModeActive,
|
||||
this.amplitude = 0.0,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
State<VoiceMicButton> createState() => _VoiceMicButtonState();
|
||||
}
|
||||
|
||||
class _VoiceMicButtonState extends State<VoiceMicButton>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late AnimationController _pulseController;
|
||||
late Animation<double> _pulseAnimation;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_pulseController = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(milliseconds: 900),
|
||||
)..repeat(reverse: true);
|
||||
_pulseAnimation = Tween<double>(begin: 1.0, end: 1.25).animate(
|
||||
CurvedAnimation(parent: _pulseController, curve: Curves.easeInOut),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_pulseController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
Color _bgColor(BuildContext context) {
|
||||
final cs = Theme.of(context).colorScheme;
|
||||
return switch (widget.mode) {
|
||||
return switch (mode) {
|
||||
VoiceMode.recording => const Color(0xFFEF4444),
|
||||
VoiceMode.transcribing || VoiceMode.playing => cs.primary,
|
||||
VoiceMode.idle => cs.surfaceContainerHighest,
|
||||
@@ -58,11 +36,10 @@ class _VoiceMicButtonState extends State<VoiceMicButton>
|
||||
|
||||
Widget _icon(BuildContext context) {
|
||||
final cs = Theme.of(context).colorScheme;
|
||||
final iconColor = widget.mode == VoiceMode.idle
|
||||
? cs.onSurfaceVariant
|
||||
: Colors.white;
|
||||
final iconColor =
|
||||
mode == VoiceMode.idle ? cs.onSurfaceVariant : Colors.white;
|
||||
|
||||
return switch (widget.mode) {
|
||||
return switch (mode) {
|
||||
VoiceMode.transcribing => SizedBox(
|
||||
width: 18,
|
||||
height: 18,
|
||||
@@ -78,14 +55,14 @@ class _VoiceMicButtonState extends State<VoiceMicButton>
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final isRecording = widget.mode == VoiceMode.recording;
|
||||
final isRecording = mode == VoiceMode.recording;
|
||||
|
||||
final button = Material(
|
||||
color: _bgColor(context),
|
||||
shape: const CircleBorder(),
|
||||
child: InkWell(
|
||||
customBorder: const CircleBorder(),
|
||||
onTap: widget.onTap,
|
||||
onTap: onTap,
|
||||
child: SizedBox(
|
||||
width: 40,
|
||||
height: 40,
|
||||
@@ -96,22 +73,30 @@ class _VoiceMicButtonState extends State<VoiceMicButton>
|
||||
|
||||
if (!isRecording) return button;
|
||||
|
||||
return AnimatedBuilder(
|
||||
animation: _pulseAnimation,
|
||||
builder: (_, child) => Container(
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: const Color(0xFFEF4444).withValues(alpha: 0.35),
|
||||
blurRadius: 8 * _pulseAnimation.value,
|
||||
spreadRadius: 2 * _pulseAnimation.value,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: child,
|
||||
// Base pulse so silence still breathes (0.1 floor), scale + glow climb
|
||||
// linearly with live amplitude.
|
||||
final amp = amplitude.clamp(0.0, 1.0);
|
||||
final pulse = 0.1 + amp * 0.9;
|
||||
|
||||
return AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 120),
|
||||
curve: Curves.easeOut,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: const Color(0xFFEF4444).withValues(alpha: 0.2 + pulse * 0.3),
|
||||
blurRadius: 6 + pulse * 14,
|
||||
spreadRadius: 1 + pulse * 5,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: AnimatedScale(
|
||||
scale: 1.0 + pulse * 0.18,
|
||||
duration: const Duration(milliseconds: 120),
|
||||
curve: Curves.easeOut,
|
||||
child: button,
|
||||
),
|
||||
child: button,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user