updated add device type

lib/pages/spaces_management/widgets/add_device_type_widget.dart

@@ -13,24 +13,27 @@ class AddDeviceWidget extends StatefulWidget {
   final ValueChanged<List<SelectedProduct>>? onProductsSelected;
   final List<SelectedProduct>? initialSelectedProducts;
 
-  const AddDeviceWidget(
+  const AddDeviceWidget({
-      {super.key, this.products, this.initialSelectedProducts, this.onProductsSelected});
+    super.key,
+    this.products,
+    this.initialSelectedProducts,
+    this.onProductsSelected,
+  });
 
   @override
   _AddDeviceWidgetState createState() => _AddDeviceWidgetState();
 }
 
 class _AddDeviceWidgetState extends State<AddDeviceWidget> {
-  late ScrollController _scrollController;
+  late final ScrollController _scrollController;
-  List<SelectedProduct> productCounts = [];
+  late List<SelectedProduct> productCounts;
 
   @override
   void initState() {
     super.initState();
     _scrollController = ScrollController();
-    if (widget.initialSelectedProducts != null && widget.initialSelectedProducts!.isNotEmpty) {
+    productCounts =
-      productCounts = List.from(widget.initialSelectedProducts!);
+        widget.initialSelectedProducts != null ? List.from(widget.initialSelectedProducts!) : [];
-    }
   }
 
   @override
@@ -41,86 +44,72 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
 
   @override
   Widget build(BuildContext context) {
-    Size size = MediaQuery.of(context).size;
+    final size = MediaQuery.of(context).size;
 
     return AlertDialog(
       title: const Text('Add Devices'),
       backgroundColor: ColorsManager.whiteColors,
       content: Container(
         width: size.width * 0.65,
-        height: size.height * 0.57, // Set width for the dialog
+        height: size.height * 0.57,
         color: ColorsManager.textFieldGreyColor,
         child: Column(
           children: [
-            const SizedBox(height: 16.0),
+            const SizedBox(height: 16),
             Expanded(
               child: Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 20.0), // Add horizontal padding
+                padding: const EdgeInsets.symmetric(horizontal: 20.0),
-                  child: Scrollbar(
+                child: Scrollbar(
+                  controller: _scrollController,
+                  thumbVisibility: false,
+                  child: GridView.builder(
                     controller: _scrollController,
-                    thumbVisibility: false,
+                    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-                    child: GridView.builder(
+                      crossAxisCount: 6,
-                      controller: _scrollController,
+                      mainAxisSpacing: 10,
-                      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                      crossAxisSpacing: 10,
-                        crossAxisCount: 6, // Display 6 items in a row
+                      childAspectRatio: 0.7,
-                        mainAxisSpacing: 10,
-                        crossAxisSpacing: 10,
-                        childAspectRatio: 0.7, // Adjust the aspect ratio
-                      ),
-                      itemCount: widget.products?.length ?? 0,
-                      itemBuilder: (context, index) {
-                        final deviceType = widget.products![index];
-                        return _buildDeviceTypeTile(deviceType);
-                      },
                     ),
-                  )),
+                    itemCount: widget.products?.length ?? 0,
+                    itemBuilder: (context, index) {
+                      final product = widget.products![index];
+                      return _buildDeviceTypeTile(product);
+                    },
+                  ),
+                ),
+              ),
             ),
           ],
         ),
       ),
       actions: [
         Row(
-          mainAxisAlignment:
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              MainAxisAlignment.spaceBetween, // Align cancel to the left and continue to the right
           children: [
-            SizedBox(
+            _buildActionButton('Cancel', ColorsManager.boxColor, ColorsManager.blackColor, () {
-              width: 200, // Define a specific width for the button
+              Navigator.of(context).pop();
-              child: DefaultButton(
+            }),
-                onPressed: () {
+            _buildActionButton('Continue', ColorsManager.secondaryColor, Colors.white, () {
-                  Navigator.of(context).pop();
+              Navigator.of(context).pop();
-                },
+              if (widget.onProductsSelected != null) {
-                backgroundColor: ColorsManager.boxColor,
+                widget.onProductsSelected!(productCounts);
-                foregroundColor: ColorsManager.blackColor,
+              }
-                child: const Text('Cancel'),
+            }),
-              ),
-            ),
-            SizedBox(
-              width: 200, // Define a specific width for the button
-              child: DefaultButton(
-                onPressed: () {
-                  Navigator.of(context).pop();
-                },
-                backgroundColor: ColorsManager.secondaryColor,
-                foregroundColor: Colors.white,
-                child: const Text('Continue'),
-              ),
-            ),
           ],
         ),
       ],
     );
   }
 
-  Widget _buildDeviceTypeTile(ProductModel? deviceType) {
+  Widget _buildDeviceTypeTile(ProductModel product) {
-
+    final selectedProduct = productCounts.firstWhere(
-     SelectedProduct? existingProduct = productCounts.firstWhere(
+      (p) => p.productId == product.uuid,
-      (product) => product.productId == deviceType?.uuid,
+      orElse: () => SelectedProduct(productId: product.uuid, count: 0),
-      orElse: () => SelectedProduct(productId: deviceType!.uuid, count: 0),
     );
 
     return SizedBox(
       width: 75,
-      height: 90, // Increase height if needed
+      height: 90,
       child: Card(
         elevation: 2,
         color: ColorsManager.whiteColors,
@@ -132,53 +121,25 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
-              // Fixed height container for the icon
+              _buildDeviceIcon(product),
-              Container(
-                height: 80,
-                width: 80,
-                decoration: BoxDecoration(
-                  shape: BoxShape.circle, // Make it circular
-                  color: ColorsManager.textFieldGreyColor, // Background color of the circle
-                  border: Border.all(
-                    color: ColorsManager.neutralGray, // Border color
-                    width: 2, // Border width
-                  ),
-                ), // Fixed height for the icon
-                child: Center(
-                  child: SvgPicture.asset(
-                    deviceType?.icon ?? Assets.sensors,
-                    width: 45,
-                    height: 45,
-                  ),
-                ),
-              ),
               const SizedBox(height: 8),
-              // Fixed height container for the name
+              _buildDeviceName(product),
-              SizedBox(
-                height: 35, // Fixed height for the text (adjust as needed)
-                child: Text(
-                  deviceType?.name ?? '',
-                  style: context.textTheme.bodySmall!.copyWith(color: ColorsManager.blackColor),
-                  textAlign: TextAlign.center,
-                  maxLines: 2, // Allow up to 2 lines for long names
-                  overflow: TextOverflow.ellipsis, // Handle overflow
-                ),
-              ),
               const SizedBox(height: 8),
-              // The custom counter widget aligned at the bottom
               CounterWidget(
-                initialCount: existingProduct.count,
+                initialCount: selectedProduct.count,
                 onCountChanged: (newCount) {
                   setState(() {
                     if (newCount > 0) {
-                      if (!productCounts.contains(existingProduct)) {
+                      if (!productCounts.contains(selectedProduct)) {
-                        productCounts.add(SelectedProduct(productId: deviceType!.uuid, count: newCount));
+                        productCounts
+                            .add(SelectedProduct(productId: product.uuid, count: newCount));
                       } else {
-                        existingProduct.count = newCount;
+                        selectedProduct.count = newCount;
                       }
                     } else {
-                      productCounts.remove(deviceType!.uuid);
+                      productCounts.removeWhere((p) => p.productId == product.uuid);
                     }
+
                     if (widget.onProductsSelected != null) {
                       widget.onProductsSelected!(productCounts);
                     }
@@ -191,4 +152,56 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
       ),
     );
   }
+
+  Widget _buildDeviceIcon(ProductModel product) {
+    return Container(
+      height: 80,
+      width: 80,
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        color: ColorsManager.textFieldGreyColor,
+        border: Border.all(
+          color: ColorsManager.neutralGray,
+          width: 2,
+        ),
+      ),
+      child: Center(
+        child: SvgPicture.asset(
+          product.icon ?? Assets.sensors,
+          width: 45,
+          height: 45,
+        ),
+      ),
+    );
+  }
+
+  Widget _buildDeviceName(ProductModel product) {
+    return SizedBox(
+      height: 35,
+      child: Text(
+        product.name ?? '',
+        style: context.textTheme.bodySmall?.copyWith(color: ColorsManager.blackColor),
+        textAlign: TextAlign.center,
+        maxLines: 2,
+        overflow: TextOverflow.ellipsis,
+      ),
+    );
+  }
+
+  Widget _buildActionButton(
+    String label,
+    Color backgroundColor,
+    Color foregroundColor,
+    VoidCallback onPressed,
+  ) {
+    return SizedBox(
+      width: 200,
+      child: DefaultButton(
+        onPressed: onPressed,
+        backgroundColor: backgroundColor,
+        foregroundColor: foregroundColor,
+        child: Text(label),
+      ),
+    );
+  }
 }