import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:syncrow_web/utils/color_manager.dart'; class HoverableButton extends StatefulWidget { final String iconPath; final String text; final VoidCallback onTap; const HoverableButton({ Key? key, required this.iconPath, required this.text, required this.onTap, }) : super(key: key); @override State createState() => _HoverableButtonState(); } class _HoverableButtonState extends State { bool isHovered = false; @override Widget build(BuildContext context) { final theme = Theme.of(context); final screenWidth = MediaQuery.of(context).size.width; return GestureDetector( onTap: widget.onTap, child: MouseRegion( onEnter: (_) => _updateHoverState(true), onExit: (_) => _updateHoverState(false), child: SizedBox( width: screenWidth * .07, child: Container( padding: const EdgeInsets.symmetric(horizontal: 13, vertical: 8), decoration: BoxDecoration( color: isHovered ? ColorsManager.warningRed : ColorsManager.whiteColors, borderRadius: BorderRadius.circular(16), boxShadow: [ if (isHovered) BoxShadow( color: ColorsManager.warningRed.withOpacity(0.4), blurRadius: 8, offset: const Offset(0, 4), ), ], ), child: Center( child: Row( mainAxisSize: MainAxisSize.min, children: [ _buildIcon(), if (!isHovered) const SizedBox(width: 8), if (!isHovered) _buildText(theme), ], ), )), )), ); } Widget _buildIcon() { return isHovered ? const Icon( Icons.close, color: ColorsManager.whiteColors, size: 24, ) : SvgPicture.asset( widget.iconPath, width: 24, height: 24, ); } Widget _buildText(ThemeData theme) { return Text( widget.text, style: theme.textTheme.bodyLarge?.copyWith( color: ColorsManager.spaceColor, fontWeight: FontWeight.w500, ), ); } void _updateHoverState(bool hover) { setState(() => isHovered = hover); } }