112 lines
3.0 KiB
Dart
112 lines
3.0 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
/// Shared hover animation for cards and tappable surfaces (web/desktop).
|
|
class AppHoverStyle {
|
|
AppHoverStyle._();
|
|
|
|
static const Duration duration = Duration(milliseconds: 200);
|
|
static const Curve curve = Curves.easeOutCubic;
|
|
static const double lift = 2;
|
|
static const double scale = 1.01;
|
|
static const double elevationDelta = 3;
|
|
}
|
|
|
|
class AppHoverEffect extends StatefulWidget {
|
|
const AppHoverEffect({
|
|
super.key,
|
|
required this.child,
|
|
this.enabled = true,
|
|
this.onTap,
|
|
this.borderRadius = 12,
|
|
this.hoverBorderColor,
|
|
this.idleBorderColor,
|
|
this.showHoverBorder = true,
|
|
});
|
|
|
|
final Widget child;
|
|
final bool enabled;
|
|
final VoidCallback? onTap;
|
|
final double borderRadius;
|
|
final Color? hoverBorderColor;
|
|
final Color? idleBorderColor;
|
|
final bool showHoverBorder;
|
|
|
|
@override
|
|
State<AppHoverEffect> createState() => _AppHoverEffectState();
|
|
}
|
|
|
|
class _AppHoverEffectState extends State<AppHoverEffect> {
|
|
bool _hovered = false;
|
|
Brightness? _brightness;
|
|
|
|
void _setHovered(bool value) {
|
|
if (!widget.enabled || _hovered == value) return;
|
|
setState(() => _hovered = value);
|
|
}
|
|
|
|
@override
|
|
void didChangeDependencies() {
|
|
super.didChangeDependencies();
|
|
final brightness = Theme.of(context).brightness;
|
|
if (_brightness != brightness) {
|
|
_brightness = brightness;
|
|
_hovered = false;
|
|
if (mounted) setState(() {});
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final theme = Theme.of(context);
|
|
final borderRadius = BorderRadius.circular(widget.borderRadius);
|
|
final idleBorder = widget.idleBorderColor ??
|
|
theme.colorScheme.outline.withValues(alpha: 0.12);
|
|
final hoverBorder = widget.hoverBorderColor ??
|
|
theme.colorScheme.primary.withValues(alpha: 0.28);
|
|
|
|
Widget content = AnimatedScale(
|
|
scale: widget.enabled && _hovered ? AppHoverStyle.scale : 1,
|
|
duration: AppHoverStyle.duration,
|
|
curve: AppHoverStyle.curve,
|
|
child: AnimatedContainer(
|
|
duration: AppHoverStyle.duration,
|
|
curve: AppHoverStyle.curve,
|
|
transform: Matrix4.translationValues(
|
|
0,
|
|
widget.enabled && _hovered ? -AppHoverStyle.lift : 0,
|
|
0,
|
|
),
|
|
decoration: widget.showHoverBorder
|
|
? BoxDecoration(
|
|
borderRadius: borderRadius,
|
|
border: Border.all(
|
|
color: widget.enabled && _hovered ? hoverBorder : idleBorder,
|
|
),
|
|
)
|
|
: null,
|
|
child: widget.child,
|
|
),
|
|
);
|
|
|
|
if (widget.onTap != null) {
|
|
content = Material(
|
|
color: Colors.transparent,
|
|
child: InkWell(
|
|
onTap: widget.onTap,
|
|
borderRadius: borderRadius,
|
|
child: content,
|
|
),
|
|
);
|
|
}
|
|
|
|
if (!widget.enabled) return content;
|
|
|
|
return MouseRegion(
|
|
onEnter: (_) => _setHovered(true),
|
|
onExit: (_) => _setHovered(false),
|
|
cursor: widget.onTap != null ? SystemMouseCursors.click : SystemMouseCursors.basic,
|
|
child: content,
|
|
);
|
|
}
|
|
}
|