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

Refactor CreateSpaceButton: Changed from StatelessWidget to StatefulWidget to manage hover state and added tooltip for improved user experience. Enhanced button styling and interaction feedback for better visual cues during space creation.

Browse Source
This commit is contained in:
Faris Armoush
2025-07-08 13:07:26 +03:00
parent 7c2aed2d58
commit 9e6b14737f
1 changed files with 50 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
lib/pages/space_management_v2/main_module/widgets/create_space_button.dart
View File

@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/helpers/space_details_dialog_helper.dart'; import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/helpers/space_details_dialog_helper.dart';
import 'package:syncrow_web/utils/color_manager.dart'; import 'package:syncrow_web/utils/color_manager.dart';
class CreateSpaceButton extends StatelessWidget { class CreateSpaceButton extends StatefulWidget {
const CreateSpaceButton({ const CreateSpaceButton({
required this.communityUuid, required this.communityUuid,
super.key, super.key,
@ -10,38 +10,58 @@ class CreateSpaceButton extends StatelessWidget {
final String communityUuid; final String communityUuid;
@override
State<CreateSpaceButton> createState() => _CreateSpaceButtonState();
}
class _CreateSpaceButtonState extends State<CreateSpaceButton> {
bool _isHovered = false;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return GestureDetector( return Tooltip(
onTap: () => SpaceDetailsDialogHelper.showCreate( margin: const EdgeInsets.symmetric(vertical: 24),
context, message: 'Create a new space',
communityUuid: communityUuid, child: GestureDetector(
), onTap: () => SpaceDetailsDialogHelper.showCreate(
child: Container( context,
height: 60, communityUuid: widget.communityUuid,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.grey.withValues(alpha: 0.5),
spreadRadius: 5,
blurRadius: 7,
offset: const Offset(0, 3),
),
],
), ),
child: Center( child: MouseRegion(
child: Container( onEnter: (_) => setState(() => _isHovered = true),
width: 40, onExit: (_) => setState(() => _isHovered = false),
height: 40, child: AnimatedOpacity(
decoration: const BoxDecoration( duration: const Duration(milliseconds: 100),
color: ColorsManager.boxColor, opacity: _isHovered ? 1.0 : 0.45,
shape: BoxShape.circle, child: Container(
), width: 150,
child: const Icon( height: 90,
Icons.add, decoration: BoxDecoration(
color: Colors.blue, color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.grey.withValues(alpha: 0.2),
spreadRadius: 3,
blurRadius: 8,
offset: const Offset(0, 4),
),
],
),
child: Container(
margin: const EdgeInsets.symmetric(vertical: 20),
decoration: BoxDecoration(
border: Border.all(color: ColorsManager.borderColor, width: 2),
color: ColorsManager.boxColor,
shape: BoxShape.circle,
),
child: const Center(
child: Icon(
Icons.add,
color: Colors.blue,
),
),
),
), ),
), ),
), ),