Marcos/notas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Convert _MenuItemTile to StatefulWidget for hover effect support

Browse Source
This commit is contained in:
Marcos
2026-05-21 17:16:54 +02:00
parent 48d09fe170
commit 63f0079a5a
1 changed files with 41 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/widgets/menu_drawer.dart
+41 -28
View File
@@ -124,7 +124,7 @@ IconData _iconForCodePoint(int? codePoint) {
return Icons.folder_outlined;
}
class _MenuItemTile extends StatelessWidget {
class _MenuItemTile extends StatefulWidget {
const _MenuItemTile({
required this.icon,
required this.label,
@@ -143,39 +143,52 @@ class _MenuItemTile extends StatelessWidget {
final Color? textColor;
final Widget? trailing;
@override
State<_MenuItemTile> createState() => _MenuItemTileState();
}
class _MenuItemTileState extends State<_MenuItemTile> {
bool _hovering = false;
@override
Widget build(BuildContext context) {
final Color backgroundColor = selected
final bool active = widget.selected || _hovering;
final Color backgroundColor = active
? Colors.white.withValues(alpha: 0.10)
: Colors.transparent;
final Color foregroundColor = selected ? Colors.white : Colors.white70;
final Color foregroundColor = active ? Colors.white : Colors.white70;
return AnimatedContainer(
duration: const Duration(milliseconds: 180),
curve: Curves.easeOutCubic,
margin: EdgeInsets.only(
right: 8,
top: 2,
bottom: 2,
),
child: Material(
color: backgroundColor,
borderRadius: selected
? const BorderRadius.only(
topRight: Radius.circular(999),
bottomRight: Radius.circular(999),
)
: BorderRadius.circular(12),
clipBehavior: Clip.antiAlias,
child: ListTile(
leading: Icon(icon, color: iconColor ?? foregroundColor),
trailing: trailing,
title: Text(
label,
style: TextStyle(color: textColor ?? foregroundColor, fontSize: 14),
return MouseRegion(
onEnter: (_) {
setState(() => _hovering = true);
},
onExit: (_) {
setState(() => _hovering = false);
},
child: AnimatedContainer(
duration: const Duration(milliseconds: 180),
curve: Curves.easeOutCubic,
margin: const EdgeInsets.only(
right: 8,
top: 2,
bottom: 2,
),
child: Material(
color: backgroundColor,
borderRadius: const BorderRadius.only(
topRight: Radius.circular(999),
bottomRight: Radius.circular(999),
),
clipBehavior: Clip.antiAlias,
child: ListTile(
leading: Icon(widget.icon, color: widget.iconColor ?? foregroundColor),
trailing: widget.trailing,
title: Text(
widget.label,
style: TextStyle(color: widget.textColor ?? foregroundColor, fontSize: 14),
),
onTap: widget.onTap,
),
onTap: onTap,
hoverColor: Colors.white.withValues(alpha: 0.1),
),
),
);