added circular border

2025-07-15 17:47:53 +00:00 · 2024-10-09 16:04:05 +04:00
parent e09dc966e0
commit b87bbb9a62
13 changed files with 437 additions and 54 deletions
--- a/lib/pages/spaces_management/widgets/add_device_type_widget.dart
+++ b/lib/pages/spaces_management/widgets/add_device_type_widget.dart
@ -0,0 +1,135 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/device_type_model.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+class AddDeviceWidget extends StatefulWidget {
+  const AddDeviceWidget({Key? key}) : super(key: key);
+
+  @override
+  _AddDeviceWidgetState createState() => _AddDeviceWidgetState();
+}
+
+// Create a static list of DeviceTypeModel
+final List<DeviceTypeModel> staticDeviceTypes = [
+  DeviceTypeModel(name: 'Smart Light', icon: Assets.smartLightIcon),
+  DeviceTypeModel(name: 'Presence Sensor', icon: Assets.presenceSensor),
+  DeviceTypeModel(name: '3 Gang Smart switch', icon: Assets.Gang3SwitchIcon),
+  DeviceTypeModel(name: '2 Gang Smart switch', icon: Assets.Gang2SwitchIcon),
+  DeviceTypeModel(name: '1 Gang Smart switch', icon: Assets.Gang1SwitchIcon),
+  DeviceTypeModel(name: 'Smart Door Lock', icon: Assets.DoorLockIcon),
+  DeviceTypeModel(name: 'Smart Gateway', icon: Assets.SmartGatewayIcon)
+];
+
+class _AddDeviceWidgetState extends State<AddDeviceWidget> {
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      title: const Text('Add Devices'),
+      backgroundColor: ColorsManager.whiteColors,
+      content: Container(
+        width: 800, // Set width for the dialog
+        height: 600, // Set height for the dialog
+        color: Color(0xFFF4F4F4),
+        child: Column(
+          children: [
+            const SizedBox(height: 16.0),
+            Expanded(
+              child: GridView.builder(
+                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                  crossAxisCount: 3, // Adjust number of items per row
+                  mainAxisSpacing: 10,
+                  crossAxisSpacing: 10,
+                  childAspectRatio: 1.5,
+                ),
+                itemCount: staticDeviceTypes.length,
+                itemBuilder: (context, index) {
+                  final deviceType = staticDeviceTypes[index];
+                  return _buildDeviceTypeTile(deviceType);
+                },
+              ),
+            ),
+          ],
+        ),
+      ),
+      actions: [
+        TextButton(
+          onPressed: () => Navigator.of(context).pop(),
+          child: const Text('Cancel'),
+        ),
+        TextButton(
+          onPressed: () {
+            // Logic to save or confirm selected devices
+            Navigator.of(context).pop();
+          },
+          child: const Text('OK'),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildDeviceTypeTile(DeviceTypeModel deviceType) {
+    return SizedBox(
+        width: 90, // Set desired width
+        height: 120, // Set desired height
+        child: Card(
+          elevation: 2,
+          color: ColorsManager.whiteColors,
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(10),
+          ),
+          child: Padding(
+            padding: const EdgeInsets.all(12.0),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Container(
+                  width: 60, // Width for the circular container
+                  height: 60, // Height for the circular container
+                  decoration: BoxDecoration(
+                    shape: BoxShape.circle,
+                    border: Border.all(
+                      color: ColorsManager.textFieldGreyColor, // Border color
+                      width: 2, // Border width
+                    ),
+                    color: ColorsManager.textFieldGreyColor,
+                  ),
+                  child: Center(
+                    child: SvgPicture.asset(
+                      deviceType.icon,
+                      width: 40,
+                      height: 40,
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 8),
+                Text(
+                  deviceType.name,
+                  style: const TextStyle(
+                    fontSize: 14,
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
+                const SizedBox(height: 8),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    IconButton(
+                      onPressed: () {
+                        setState(() {});
+                      },
+                      icon: const Icon(Icons.remove_circle_outline),
+                    ),
+                    IconButton(
+                      onPressed: () {},
+                      icon: const Icon(Icons.add_circle_outline),
+                    ),
+                  ],
+                ),
+              ],
+            ),
+          ),
+        ));
+  }
+}