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; return Icons.folder_outlined;
} }
class _MenuItemTile extends StatelessWidget { class _MenuItemTile extends StatefulWidget {
const _MenuItemTile({ const _MenuItemTile({
required this.icon, required this.icon,
required this.label, required this.label,
@@ -143,39 +143,52 @@ class _MenuItemTile extends StatelessWidget {
final Color? textColor; final Color? textColor;
final Widget? trailing; final Widget? trailing;
@override
State<_MenuItemTile> createState() => _MenuItemTileState();
}
class _MenuItemTileState extends State<_MenuItemTile> {
bool _hovering = false;
@override @override
Widget build(BuildContext context) { 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.white.withValues(alpha: 0.10)
: Colors.transparent; : Colors.transparent;
final Color foregroundColor = selected ? Colors.white : Colors.white70; final Color foregroundColor = active ? Colors.white : Colors.white70;
return AnimatedContainer( return MouseRegion(
duration: const Duration(milliseconds: 180), onEnter: (_) {
curve: Curves.easeOutCubic, setState(() => _hovering = true);
margin: EdgeInsets.only( },
right: 8, onExit: (_) {
top: 2, setState(() => _hovering = false);
bottom: 2, },
), child: AnimatedContainer(
child: Material( duration: const Duration(milliseconds: 180),
color: backgroundColor, curve: Curves.easeOutCubic,
borderRadius: selected margin: const EdgeInsets.only(
? const BorderRadius.only( right: 8,
topRight: Radius.circular(999), top: 2,
bottomRight: Radius.circular(999), bottom: 2,
) ),
: BorderRadius.circular(12), child: Material(
clipBehavior: Clip.antiAlias, color: backgroundColor,
child: ListTile( borderRadius: const BorderRadius.only(
leading: Icon(icon, color: iconColor ?? foregroundColor), topRight: Radius.circular(999),
trailing: trailing, bottomRight: Radius.circular(999),
title: Text( ),
label, clipBehavior: Clip.antiAlias,
style: TextStyle(color: textColor ?? foregroundColor, fontSize: 14), 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),
), ),
), ),
); );