add create space model widget UI

This commit is contained in:
hannathkadher
2025-01-03 10:13:44 +04:00
parent e12252db96
commit e0ff139f30
2 changed files with 160 additions and 4 deletions

View File

@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/spaces_management/space_model/models/space_template_model.dart';
import 'package:syncrow_web/pages/spaces_management/space_model/widgets/dialog/create_space_model_dialog.dart';
import 'package:syncrow_web/pages/spaces_management/space_model/widgets/space_model_card_widget.dart';
import 'package:syncrow_web/utils/color_manager.dart';
@ -20,15 +21,22 @@ class SpaceModelPage extends StatelessWidget {
physics: const AlwaysScrollableScrollPhysics(),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 14.0,
mainAxisSpacing: 14.0,
childAspectRatio: 3,
crossAxisSpacing: 13.0,
mainAxisSpacing: 13.0,
childAspectRatio: 3.5,
),
itemCount: spaceModels.length + 1,
itemBuilder: (context, index) {
if (index == spaceModels.length) {
return GestureDetector(
onTap: () {},
onTap: () {
showDialog(
context: context,
builder: (BuildContext context) {
return const CreateSpaceModelDialog();
},
);
},
child: Container(
decoration: BoxDecoration(
color: ColorsManager.whiteColors,

View File

@ -0,0 +1,148 @@
import 'package:flutter/material.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';
class CreateSpaceModelDialog extends StatelessWidget {
const CreateSpaceModelDialog({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
return AlertDialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
backgroundColor: ColorsManager.whiteColors,
content: SizedBox(
width: screenWidth * 0.3,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Create New Space Model',
style: Theme.of(context)
.textTheme
.headlineLarge
?.copyWith(color: ColorsManager.blackColor),
),
const SizedBox(height: 16),
SizedBox(
width: screenWidth * 0.25,
child: TextField(
style: const TextStyle(color: ColorsManager.blackColor),
decoration: InputDecoration(
filled: true,
fillColor: ColorsManager.textFieldGreyColor,
hintText: 'Please enter the name',
hintStyle:
const TextStyle(color: ColorsManager.lightGrayColor),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide.none,
),
contentPadding: const EdgeInsets.symmetric(
vertical: 12.0,
horizontal: 16.0,
),
),
),
),
const SizedBox(height: 16),
SizedBox(
width: screenWidth * 0.25,
child: Container(
decoration: BoxDecoration(
color: ColorsManager.textFieldGreyColor,
border: Border.all(
color: ColorsManager.neutralGray,
width: 3.0,
),
borderRadius: BorderRadius.circular(20),
),
child: const Padding(
padding:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 16.0),
child: Row(
children: [
Icon(
Icons.add,
color: ColorsManager.spaceColor,
),
SizedBox(width: 10),
Expanded(
child: Text(
'Create sub space',
style: TextStyle(
color: ColorsManager.blackColor,
fontSize: 16,
),
),
),
],
),
),
),
),
const SizedBox(height: 10),
SizedBox(
width: screenWidth * 0.25,
child: Container(
decoration: BoxDecoration(
color: ColorsManager.textFieldGreyColor,
border:
Border.all(color: ColorsManager.neutralGray, width: 3.0),
borderRadius: BorderRadius.circular(20),
),
child: const Padding(
padding:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 16.0),
child: Row(
children: [
Icon(
Icons.add,
color: ColorsManager.spaceColor,
),
SizedBox(width: 10),
Expanded(
child: Text(
'Add devices',
style: TextStyle(
color: ColorsManager.blackColor,
fontSize: 16,
),
),
),
],
),
),
),
),
const SizedBox(height: 20),
SizedBox(
width: screenWidth * 0.25,
child: Row(
children: [
Expanded(
child: CancelButton(
label: 'Cancel',
onPressed: () => Navigator.of(context).pop(),
)),
const SizedBox(width: 10),
Expanded(
child: DefaultButton(
onPressed: () {},
backgroundColor: ColorsManager.secondaryColor,
borderRadius: 10,
foregroundColor: ColorsManager.whiteColors,
child: const Text('OK'),
),
),
],
),
)
],
),
),
);
}
}