From 5091aa1e4983c650bd80b4391c1d43df8c5814b0 Mon Sep 17 00:00:00 2001 From: hannathkadher Date: Tue, 26 Nov 2024 13:29:48 +0400 Subject: [PATCH] responsive community header --- lib/pages/common/buttons/default_button.dart | 8 +- .../community_stricture_header_widget.dart | 134 ++++++++++++------ 2 files changed, 94 insertions(+), 48 deletions(-) diff --git a/lib/pages/common/buttons/default_button.dart b/lib/pages/common/buttons/default_button.dart index 2d901960..4aa748b7 100644 --- a/lib/pages/common/buttons/default_button.dart +++ b/lib/pages/common/buttons/default_button.dart @@ -70,14 +70,14 @@ class DefaultButton extends StatelessWidget { borderRadius: BorderRadius.circular(borderRadius ?? 20), ), ), - fixedSize: WidgetStateProperty.all( - const Size.fromHeight(50), - ), + fixedSize: height != null + ? WidgetStateProperty.all(Size.fromHeight(height!)) + : null, padding: WidgetStateProperty.all( EdgeInsets.all(padding ?? 10), ), minimumSize: WidgetStateProperty.all( - const Size.fromHeight(50), + const Size.fromHeight(10), ), elevation: WidgetStateProperty.all(elevation ?? 0), ), diff --git a/lib/pages/spaces_management/widgets/community_stricture_header_widget.dart b/lib/pages/spaces_management/widgets/community_stricture_header_widget.dart index cdbbf195..0f7e92d4 100644 --- a/lib/pages/spaces_management/widgets/community_stricture_header_widget.dart +++ b/lib/pages/spaces_management/widgets/community_stricture_header_widget.dart @@ -29,9 +29,10 @@ class CommunityStructureHeader extends StatelessWidget { @override Widget build(BuildContext context) { final theme = Theme.of(context); + final screenWidth = MediaQuery.of(context).size.width; return Container( - padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 27.0), + padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0), decoration: BoxDecoration( color: ColorsManager.whiteColors, boxShadow: [ @@ -42,17 +43,24 @@ class CommunityStructureHeader extends StatelessWidget { ), ], ), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, children: [ - _buildCommunityInfo(theme), - _buildActionButtons(), + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: _buildCommunityInfo(theme, screenWidth), + ), + const SizedBox(width: 16), + ], + ), ], ), ); } - Widget _buildCommunityInfo(ThemeData theme) { + Widget _buildCommunityInfo(ThemeData theme, double screenWidth) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -60,22 +68,63 @@ class CommunityStructureHeader extends StatelessWidget { 'Community Structure', style: theme.textTheme.headlineLarge?.copyWith(color: ColorsManager.blackColor), ), - if (communityName != null) _buildCommunityName(), + if (communityName != null) + Row( + children: [ + if (!isEditingName) + Flexible( + child: Text( + communityName!, + style: const TextStyle(fontSize: 16, color: ColorsManager.blackColor), + overflow: TextOverflow.ellipsis, + maxLines: 1, + ), + ), + if (isEditingName) + SizedBox( + width: screenWidth * 0.3, + child: TextField( + controller: nameController, + decoration: const InputDecoration( + border: InputBorder.none, + isDense: true, + ), + style: const TextStyle(fontSize: 16, color: ColorsManager.blackColor), + onSubmitted: onNameSubmitted, + ), + ), + const SizedBox(width: 8), + GestureDetector( + onTap: onEditName, + child: SvgPicture.asset( + Assets.iconEdit, + width: 16, + height: 16, + ), + ), + const Spacer(flex: 3), // Pushes the Save button to the right + if (isSave) _buildActionButtons(), + ], + ), ], ); } - Widget _buildCommunityName() { + Widget _buildCommunityName(double screenWidth) { return Row( children: [ if (!isEditingName) - Text( - communityName!, - style: const TextStyle(fontSize: 16, color: ColorsManager.blackColor), + Flexible( + child: Text( + communityName!, + style: const TextStyle(fontSize: 16, color: ColorsManager.blackColor), + overflow: TextOverflow.ellipsis, + maxLines: 1, + ), ), if (isEditingName) SizedBox( - width: 200, + width: screenWidth * 0.3, child: TextField( controller: nameController, decoration: const InputDecoration( @@ -100,28 +149,15 @@ class CommunityStructureHeader extends StatelessWidget { } Widget _buildActionButtons() { - return Row( + return Wrap( + alignment: WrapAlignment.end, + spacing: 10, children: [ - if (isSave) - _buildButton( - label: "Save", - icon: const Icon(Icons.save, size: 18, color: ColorsManager.spaceColor), - onPressed: onSave, - ), - if (isSave) const SizedBox(width: 10), - /* - Commenting till finalize delete - if (communityName != null && communityName != '') - _buildButton( - label: "Delete", - icon: SvgPicture.asset( - Assets.delete, - width: 18, - height: 18, - ), - onPressed: onDelete, - ), - */ + _buildButton( + label: "Save", + icon: const Icon(Icons.save, size: 18, color: ColorsManager.spaceColor), + onPressed: onSave, + ), ], ); } @@ -131,26 +167,36 @@ class CommunityStructureHeader extends StatelessWidget { required Widget icon, required VoidCallback onPressed, }) { - return SizedBox( - width: 100, - height: 30, + final double buttonHeight = 30; + return ConstrainedBox( + constraints: BoxConstraints(maxWidth: 80, minHeight: buttonHeight), child: DefaultButton( onPressed: onPressed, - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - icon, - const SizedBox(width: 8), - Text(label), - ], - ), backgroundColor: ColorsManager.textFieldGreyColor, foregroundColor: ColorsManager.blackColor, borderRadius: 8.0, padding: 2.0, + height: buttonHeight, elevation: 0, borderColor: Colors.grey.shade300, + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + icon, + const SizedBox(width: 5), + Flexible( + child: Text( + label, + style: const TextStyle(fontSize: 13), + overflow: TextOverflow.ellipsis, + maxLines: 1, + ), + ), + ], + ), ), ); } + + }