responsive community header

This commit is contained in:
hannathkadher
2024-11-26 13:29:48 +04:00
parent a82505ea6a
commit 5091aa1e49
2 changed files with 94 additions and 48 deletions

View File

@ -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),
),

View File

@ -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(
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,
),
*/
],
);
}
@ -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,
),
),
],
),
),
);
}
}