ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-10 15:17:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

hoverable button

Browse Source
This commit is contained in:
hannathkadher
2024-11-23 20:35:35 +04:00
parent 77d73270b0
commit fb6a49354e
1 changed files with 41 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
lib/pages/spaces_management/widgets/hoverable_button.dart
View File

@ -15,63 +15,74 @@ class HoverableButton extends StatefulWidget {
}) : super(key: key);
@override
_HoverableButtonState createState() => _HoverableButtonState();
State<HoverableButton> createState() => _HoverableButtonState();
}
class _HoverableButtonState extends State<HoverableButton> {
bool isHovered = false; // Track hover state
bool isHovered = false;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return GestureDetector(
onTap: widget.onTap,
child: MouseRegion(
onEnter: (_) => setState(() => isHovered = true),
onExit: (_) => setState(() => isHovered = false),
onEnter: (_) => _updateHoverState(true),
onExit: (_) => _updateHoverState(false),
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
padding: const EdgeInsets.symmetric(horizontal: 13, vertical: 8),
decoration: BoxDecoration(
color: isHovered ? ColorsManager.warningRed : Colors.white, // Change color on hover
color: isHovered ? ColorsManager.warningRed : Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
if (isHovered)
BoxShadow(
color: ColorsManager.warningRed,
color: ColorsManager.warningRed.withOpacity(0.4),
blurRadius: 8,
offset: const Offset(0, 4),
),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (!isHovered)
SvgPicture.asset(
widget.iconPath,
width: 24,
height: 24,
)
else
Center(
child: const Icon(
Icons.close, // Display "X" on hover
color: Colors.white,
size: 24,
)),
const SizedBox(width: 8),
if (!isHovered) ...[
Text(
widget.text,
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w500,
color: ColorsManager.spaceColor,
),
),
],
_buildIcon(),
if (!isHovered) const SizedBox(width: 8),
if (!isHovered) _buildText(theme),
],
),
),
),
);
}
Widget _buildIcon() {
return isHovered
? const Icon(
Icons.close,
color: Colors.white,
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);
}
}