From 17943a5ddf66fde48ab5eb7a2a4aa72db960de49 Mon Sep 17 00:00:00 2001 From: hannathkadher Date: Tue, 26 Nov 2024 12:16:46 +0400 Subject: [PATCH] responsive create/edit space --- .../widgets/dialogs/create_space_dialog.dart | 313 +++++++++--------- 1 file changed, 154 insertions(+), 159 deletions(-) diff --git a/lib/pages/spaces_management/widgets/dialogs/create_space_dialog.dart b/lib/pages/spaces_management/widgets/dialogs/create_space_dialog.dart index 4571c0c3..b3f0dd45 100644 --- a/lib/pages/spaces_management/widgets/dialogs/create_space_dialog.dart +++ b/lib/pages/spaces_management/widgets/dialogs/create_space_dialog.dart @@ -45,169 +45,162 @@ class CreateSpaceDialogState extends State { selectedProducts = widget.selectedProducts.isNotEmpty ? widget.selectedProducts : []; } + @override @override Widget build(BuildContext context) { + final screenWidth = MediaQuery.of(context).size.width; + final screenHeight = MediaQuery.of(context).size.height; + return AlertDialog( - title: widget.isEdit ? Text('Edit Space') : Text('Create new Space'), + title: widget.isEdit ? const Text('Edit Space') : const Text('Create New Space'), backgroundColor: ColorsManager.whiteColors, content: SizedBox( - width: 600, - 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: ColorsManager.boxColor, - shape: BoxShape.circle, - ), - ), - SvgPicture.asset( - selectedIcon, - width: 60, - height: 60, - ), - Positioned( - top: 2, - left: 2, - child: InkWell( - onTap: () => _showIconSelectionDialog(), - 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: Column( - crossAxisAlignment: CrossAxisAlignment.start, + width: screenWidth * 0.5, // Limit dialog width + child: SingleChildScrollView( + // Scrollable content to prevent overflow + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Stack( + alignment: Alignment.center, children: [ - // Name input field - TextField( - controller: nameController, - onChanged: (value) { - enteredName = value; - }, - style: const TextStyle(color: Colors.black), - decoration: InputDecoration( - hintText: 'Please enter the name', - hintStyle: const TextStyle( - fontSize: 14, - color: ColorsManager.lightGrayColor, - fontWeight: FontWeight.w400), - filled: true, - fillColor: ColorsManager.boxColor, - enabledBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: const BorderSide( - color: ColorsManager - .boxColor, // Light gray color when enabled (not focused) - width: 1.5, + Container( + width: screenWidth * 0.1, // Adjusted width + height: screenWidth * 0.1, // Adjusted height + decoration: const BoxDecoration( + color: ColorsManager.boxColor, + shape: BoxShape.circle, + ), + ), + SvgPicture.asset( + selectedIcon, + width: screenWidth * 0.04, + height: screenWidth * 0.04, + ), + Positioned( + top: 6, + right: 6, + child: InkWell( + onTap: _showIconSelectionDialog, + child: Container( + width: screenWidth * 0.020, + height: screenWidth * 0.020, + decoration: const BoxDecoration( + color: Colors.white, + shape: BoxShape.circle, ), - ), - // Set border when focused - focusedBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: const BorderSide( - color: ColorsManager.boxColor, // Primary color when focused - width: 1.5, - ), - ), - // Set border for disabled state - disabledBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: const BorderSide( - color: ColorsManager.boxColor, // Light gray for disabled state - width: 1.5, - ), - ), - // Set border for error state - errorBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: const BorderSide( - color: ColorsManager.boxColor, // Red border when there's an error - width: 1.5, - ), - ), - // Border for focused error state - focusedErrorBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: const BorderSide( - color: ColorsManager - .boxColor, // Red border when there's an error and it's focused - width: 1.5, + child: SvgPicture.asset( + Assets.iconEdit, + width: screenWidth * 0.06, + height: screenWidth * 0.06, ), ), ), ), - const SizedBox(height: 16), - if (selectedProducts.isNotEmpty) - _buildSelectedProductsButtons(widget.products ?? []) - else - DefaultButton( - onPressed: () { - showDialog( - context: context, - builder: (context) => AddDeviceWidget( - products: widget.products, - onProductsSelected: (selectedProductsMap) { - setState(() { - selectedProducts = selectedProductsMap; - }); - }, - ), - ); - }, - backgroundColor: ColorsManager.textFieldGreyColor, - foregroundColor: Colors.black, // Set the desired text/icon color - borderColor: ColorsManager.neutralGray, // Define border color - borderRadius: 20.0, - padding: 20.0, // Add padding - child: Row( - mainAxisSize: - MainAxisSize.min, // Adjust the button size to fit the content - children: [ - SvgPicture.asset( - Assets.addIcon, // Replace with your actual icon path - width: 20, // Set the size of the icon - height: 20, - ), - const SizedBox(width: 8), // Add spacing between the icon and text - const Text( - 'Add devices / Assign a space model', - style: TextStyle( - color: Colors.black, - fontSize: 16, - fontFamily: 'Aftika', - fontWeight: FontWeight.w400, - height: 1.5, // Adjust line height for better spacing - ), - ), - const SizedBox(width: 8), - ], - ), - ) ], ), - ), - ], - ), - ], + + const SizedBox(width: 16), + Expanded( + // Ensure the text field expands responsively + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + TextField( + controller: nameController, + onChanged: (value) { + enteredName = value; + }, + style: const TextStyle(color: Colors.black), + decoration: InputDecoration( + hintText: 'Please enter the name', + hintStyle: const TextStyle( + fontSize: 14, + color: ColorsManager.lightGrayColor, + fontWeight: FontWeight.w400, + ), + filled: true, + fillColor: ColorsManager.boxColor, + enabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: const BorderSide( + color: ColorsManager.boxColor, + width: 1.5, + ), + ), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: const BorderSide( + color: ColorsManager.boxColor, + width: 1.5, + ), + ), + ), + ), + const SizedBox(height: 16), + if (selectedProducts.isNotEmpty) + _buildSelectedProductsButtons(widget.products ?? []) + else + DefaultButton( + onPressed: () { + showDialog( + context: context, + builder: (context) => AddDeviceWidget( + products: widget.products, + onProductsSelected: (selectedProductsMap) { + setState(() { + selectedProducts = selectedProductsMap; + }); + }, + ), + ); + }, + backgroundColor: ColorsManager.textFieldGreyColor, + foregroundColor: Colors.black, + borderColor: ColorsManager.neutralGray, + borderRadius: 16.0, + padding: 10.0, // Reduced padding for smaller size + child: Align( + alignment: Alignment.centerLeft, + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Padding( + padding: const EdgeInsets.only( + left: 6.0), + child: SvgPicture.asset( + Assets.addIcon, + width: screenWidth * 0.015, // Adjust icon size + height: screenWidth * 0.015, + ), + ), + const SizedBox(width: 3), + const Flexible( + child: Text( + 'Add devices / Assign a space model', + overflow: TextOverflow.ellipsis, // Prevent overflow + style: TextStyle( + color: Colors.black, + fontSize: 14, + fontFamily: 'Aftika', + fontWeight: FontWeight.w400, + ), + ), + ), + ], + ), + )), + ], + ), + ), + ], + ), + ], + ), ), ), actions: [ @@ -224,11 +217,10 @@ class CreateSpaceDialogState extends State { Expanded( child: DefaultButton( onPressed: () { - late String newName = enteredName.isNotEmpty ? enteredName : (widget.name ?? ''); + String newName = enteredName.isNotEmpty ? enteredName : (widget.name ?? ''); if (newName.isNotEmpty) { - widget.onCreateSpace( - newName, selectedIcon, selectedProducts); // Pass the name and icon back - Navigator.of(context).pop(); // Close the dialog + widget.onCreateSpace(newName, selectedIcon, selectedProducts); + Navigator.of(context).pop(); } }, backgroundColor: ColorsManager.secondaryColor, @@ -243,6 +235,8 @@ class CreateSpaceDialogState extends State { } void _showIconSelectionDialog() { + final screenWidth = MediaQuery.of(context).size.width; + showDialog( context: context, builder: (BuildContext context) { @@ -250,8 +244,7 @@ class CreateSpaceDialogState extends State { title: const Text('Select Icon'), backgroundColor: Colors.white, content: Container( - width: 500, - height: 200, + width: screenWidth * 0.5, padding: const EdgeInsets.all(18), decoration: BoxDecoration( color: ColorsManager.boxColor, @@ -274,8 +267,8 @@ class CreateSpaceDialogState extends State { }, child: SvgPicture.asset( spaceIconList[index], - width: 50, - height: 50, + width: screenWidth * 0.06, + height: screenWidth * 0.06, ), ); }, @@ -287,8 +280,10 @@ class CreateSpaceDialogState extends State { } Widget _buildSelectedProductsButtons(List products) { + final screenWidth = MediaQuery.of(context).size.width; + return Container( - width: 600, + width: screenWidth * 0.6, padding: const EdgeInsets.all(8), decoration: BoxDecoration( color: ColorsManager.textFieldGreyColor,