141 lines
3.9 KiB
Dart
141 lines
3.9 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
/// Shared hover styling for navigation tiles (settings, roles, masters).
|
|
class AppHoverStyle {
|
|
AppHoverStyle._();
|
|
|
|
static const Duration duration = Duration(milliseconds: 180);
|
|
static const Curve curve = Curves.easeOutCubic;
|
|
static const double borderRadius = 12;
|
|
static const double idleBorderWidth = 1;
|
|
static const double hoverBorderWidth = 1.5;
|
|
|
|
static Color idleBorderColor(ColorScheme scheme) =>
|
|
scheme.outline.withValues(alpha: 0.18);
|
|
|
|
static Color hoverBorderColor(ColorScheme scheme) =>
|
|
scheme.primary.withValues(alpha: 0.45);
|
|
|
|
static List<BoxShadow> hoverShadow(ColorScheme scheme) => [
|
|
BoxShadow(
|
|
color: scheme.primary.withValues(alpha: 0.2),
|
|
blurRadius: 14,
|
|
spreadRadius: 0,
|
|
offset: const Offset(0, 4),
|
|
),
|
|
];
|
|
|
|
static BoxDecoration decoration(
|
|
ThemeData theme, {
|
|
required bool hovered,
|
|
double radius = borderRadius,
|
|
Color? backgroundColor,
|
|
bool showBorder = true,
|
|
bool showShadow = true,
|
|
}) {
|
|
final scheme = theme.colorScheme;
|
|
return BoxDecoration(
|
|
color: backgroundColor ?? scheme.surface,
|
|
borderRadius: BorderRadius.circular(radius),
|
|
border: showBorder
|
|
? Border.all(
|
|
color: hovered ? hoverBorderColor(scheme) : idleBorderColor(scheme),
|
|
width: hovered ? hoverBorderWidth : idleBorderWidth,
|
|
)
|
|
: null,
|
|
boxShadow: hovered && showShadow ? hoverShadow(scheme) : null,
|
|
);
|
|
}
|
|
}
|
|
|
|
class AppHoverEffect extends StatefulWidget {
|
|
const AppHoverEffect({
|
|
super.key,
|
|
required this.child,
|
|
this.enabled = true,
|
|
this.onTap,
|
|
this.borderRadius = AppHoverStyle.borderRadius,
|
|
this.backgroundColor,
|
|
this.showHoverBorder = true,
|
|
this.showHoverShadow = true,
|
|
});
|
|
|
|
final Widget child;
|
|
final bool enabled;
|
|
final VoidCallback? onTap;
|
|
final double borderRadius;
|
|
final Color? backgroundColor;
|
|
final bool showHoverBorder;
|
|
final bool showHoverShadow;
|
|
|
|
@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 radius = BorderRadius.circular(widget.borderRadius);
|
|
final hovered = widget.enabled && _hovered;
|
|
|
|
Widget content = AnimatedContainer(
|
|
duration: AppHoverStyle.duration,
|
|
curve: AppHoverStyle.curve,
|
|
decoration: AppHoverStyle.decoration(
|
|
theme,
|
|
hovered: hovered,
|
|
radius: widget.borderRadius,
|
|
backgroundColor: widget.backgroundColor,
|
|
showBorder: widget.showHoverBorder,
|
|
showShadow: widget.showHoverShadow,
|
|
),
|
|
clipBehavior: Clip.antiAlias,
|
|
child: widget.child,
|
|
);
|
|
|
|
if (widget.onTap != null) {
|
|
content = Material(
|
|
color: Colors.transparent,
|
|
child: InkWell(
|
|
onTap: widget.onTap,
|
|
borderRadius: radius,
|
|
splashColor: theme.colorScheme.primary.withValues(alpha: 0.06),
|
|
hoverColor: theme.colorScheme.primary.withValues(alpha: 0.04),
|
|
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,
|
|
);
|
|
}
|
|
}
|