chore: add shadow to video play/pause icon shadow (#26836)

This commit is contained in:
Alex
2026-03-11 14:15:31 -05:00
committed by GitHub
parent 471c27cd33
commit 6c531e0a5a
2 changed files with 37 additions and 17 deletions

View File

@@ -1,12 +1,15 @@
import 'dart:ui';
import 'package:flutter/material.dart';
/// A widget that animates implicitly between a play and a pause icon.
class AnimatedPlayPause extends StatefulWidget {
const AnimatedPlayPause({super.key, required this.playing, this.size, this.color});
const AnimatedPlayPause({super.key, required this.playing, this.size, this.color, this.shadows});
final double? size;
final bool playing;
final Color? color;
final List<Shadow>? shadows;
@override
State<StatefulWidget> createState() => AnimatedPlayPauseState();
@@ -39,12 +42,32 @@ class AnimatedPlayPauseState extends State<AnimatedPlayPause> with SingleTickerP
@override
Widget build(BuildContext context) {
final icon = AnimatedIcon(
color: widget.color,
size: widget.size,
icon: AnimatedIcons.play_pause,
progress: animationController,
);
return Center(
child: AnimatedIcon(
color: widget.color,
size: widget.size,
icon: AnimatedIcons.play_pause,
progress: animationController,
child: Stack(
alignment: Alignment.center,
children: [
for (final shadow in widget.shadows ?? const <Shadow>[])
Transform.translate(
offset: shadow.offset,
child: ImageFiltered(
imageFilter: ImageFilter.blur(sigmaX: shadow.blurRadius / 2, sigmaY: shadow.blurRadius / 2),
child: AnimatedIcon(
color: shadow.color,
size: widget.size,
icon: AnimatedIcons.play_pause,
progress: animationController,
),
),
),
icon,
],
),
);
}

View File

@@ -72,17 +72,14 @@ class VideoControls extends HookConsumerWidget {
children: [
Row(
children: [
IconTheme(
data: const IconThemeData(shadows: _controlShadows),
child: IconButton(
iconSize: 32,
padding: const EdgeInsets.all(12),
constraints: const BoxConstraints(),
icon: isFinished
? const Icon(Icons.replay, color: Colors.white, size: 32)
: AnimatedPlayPause(color: Colors.white, size: 32, playing: isPlaying),
onPressed: () => _toggle(ref, isCasting),
),
IconButton(
iconSize: 32,
padding: const EdgeInsets.all(12),
constraints: const BoxConstraints(),
icon: isFinished
? const Icon(Icons.replay, color: Colors.white, size: 32, shadows: _controlShadows)
: AnimatedPlayPause(color: Colors.white, size: 32, playing: isPlaying, shadows: _controlShadows),
onPressed: () => _toggle(ref, isCasting),
),
const Spacer(),
Text(