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

space canvas initial commit

Browse Source
This commit is contained in:
hannathkadher
2024-09-05 12:11:35 +04:00
parent 46689bde5f
commit 0c3b820be0
13 changed files with 649 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
lib/pages/spaces_management/view/dialogs/create_space_dialog.dart Normal file
View File

@ -0,0 +1,198 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/common/buttons/cancel_button.dart';
import 'package:syncrow_web/pages/common/buttons/default_button.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
class CreateSpaceDialog extends StatefulWidget {
// Add the onCreateSpace parameter as a required field
final Function(String, String) onCreateSpace;
const CreateSpaceDialog({super.key, required this.onCreateSpace});
@override
CreateSpaceDialogState createState() => CreateSpaceDialogState();
}
class CreateSpaceDialogState extends State<CreateSpaceDialog> {
String selectedIcon = Assets.location; // Initially selected icon
String enteredName = ''; // Store entered space name
@override
Widget build(BuildContext context) {
return AlertDialog(
title: const Text('Create New Space'),
backgroundColor: ColorsManager.whiteColors,
content: SizedBox(
width: 600, // Set width for the dialog
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Stack(
alignment: Alignment.center,
children: [
Container(
width: 100,
height: 100,
decoration: const BoxDecoration(
color: Color(0xFFF5F6F7),
shape: BoxShape.circle,
),
),
SvgPicture.asset(
selectedIcon, // Display the selected icon here
width: 60,
height: 60,
),
Positioned(
top: 2,
left: 2,
child: InkWell(
onTap: () =>
_showIconSelectionDialog(), // Open the icon selection dialog
child: Container(
width: 20,
height: 20,
decoration: const BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
child: SvgPicture.asset(Assets.iconEdit,
width: 10, height: 10),
),
),
),
],
),
const SizedBox(width: 16),
Expanded(
child: TextField(
onChanged: (value) {
enteredName = value; // Capture entered name
},
decoration: InputDecoration(
hintText: 'Please enter the name',
filled: true,
fillColor: const Color(0xFFF5F6F7),
border: OutlineInputBorder(
borderSide: const BorderSide(color: Color(0xFFF5F6F7)),
borderRadius: BorderRadius.circular(10),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFF5F6F7),
width: 1), // Default border
borderRadius: BorderRadius.circular(10),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide:
BorderSide(color: Color(0xFFF5F6F7), width: 1),
),
),
),
),
],
),
],
),
),
actions: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: CancelButton(
label: 'Cancel',
onPressed: () => Navigator.of(context).pop(),
),
),
const SizedBox(width: 10),
Expanded(
child: DefaultButton(
onPressed: () {
if (enteredName.isNotEmpty) {
widget.onCreateSpace(enteredName, selectedIcon); // Pass name and icon back
Navigator.of(context).pop(); // Close dialog
}
},
child: const Text('OK'),
backgroundColor: const Color(0xFF023DFE),
foregroundColor: Colors.white,
),
),
],
),
],
);
}
// Icon selection dialog
void _showIconSelectionDialog() {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text('Select Icon'),
backgroundColor: Colors.white,
content: Container(
width: 500, // Width of the icon selection dialog
height: 200, // Height of the dialog
padding: const EdgeInsets.all(18),
decoration: BoxDecoration(
color: const Color(0xFFF5F6F7),
borderRadius: BorderRadius.circular(12),
),
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 7, // Number of icons per row
crossAxisSpacing: 10, // Space between icons horizontally
mainAxisSpacing: 22, // Space between icons vertically
),
itemCount: _iconList.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
setState(() {
selectedIcon =
_iconList[index]; // Update the selected icon
});
Navigator.of(context)
.pop(); // Close the icon selection dialog
},
child: SvgPicture.asset(
_iconList[index],
width: 50, // Adjust size as needed
height: 50,
),
);
},
),
),
);
},
);
}
// Icon list containing SVG asset paths
final List<String> _iconList = [
Assets.location,
Assets.villa,
Assets.gym,
Assets.sauna,
Assets.bbq,
Assets.building,
Assets.desk,
Assets.door,
Assets.parking,
Assets.pool,
Assets.stair,
Assets.steamRoom,
Assets.street,
Assets.unit,
];
}