eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

TF-4002 Avoid overflow when change responsive

Browse Source
This commit is contained in:
dab246
2025-09-05 10:24:13 +07:00
committed by Dat H. Pham
parent 9bb5508111
commit c6d1a3cd2c
1 changed files with 235 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/mailbox_creator/presentation/mailbox_creator_view.dart
+235 -175
View File
@@ -1,6 +1,7 @@
import 'dart:math'; import 'dart:math' as math;
import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/utils/theme_utils.dart'; import 'package:core/presentation/utils/theme_utils.dart';
import 'package:core/utils/platform_info.dart'; import 'package:core/utils/platform_info.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
@@ -26,192 +27,251 @@ class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
final appLocalizations = AppLocalizations.of(context); final appLocalizations = AppLocalizations.of(context);
final theme = Theme.of(context); final theme = Theme.of(context);
Widget bodyWidget = Container( return LayoutBuilder(builder: (_, constraints) {
decoration: BoxDecoration( final currentScreenWidth = constraints.maxWidth;
color: Colors.white, final currentScreenHeight = constraints.maxHeight;
borderRadius: const BorderRadius.all(Radius.circular(16)), final maxScreenHeight =
boxShadow: [ controller.isFolderModalEnabled.isTrue ? 570 : 500;
BoxShadow( final isExceedSize = currentScreenHeight > maxScreenHeight;
color: Colors.black.withValues(alpha: 0.08), final isMobile = currentScreenWidth < ResponsiveUtils.minTabletWidth;
blurRadius: 24,
offset: const Offset(0, 2), List<Widget> fieldsWidgets = [
Obx(
() => LabelInputFieldBuilder(
label: appLocalizations.folderName,
hintText: appLocalizations.enterTheFolderName,
textEditingController: controller.nameInputController,
focusNode: controller.nameInputFocusNode,
errorText: controller.getErrorInputNameString(context),
arrangeHorizontally: false,
isLabelHasColon: false,
labelStyle: ThemeUtils.textStyleInter600().copyWith(
fontSize: 14,
height: 18 / 14,
color: Colors.black,
),
runSpacing: 16,
inputFieldMaxWidth: double.infinity,
onTextChange: controller.setNewNameMailbox,
), ),
BoxShadow(
color: Colors.black.withValues(alpha: 0.08),
blurRadius: 2,
),
],
),
width: min(
controller.responsiveUtils.getSizeScreenWidth(context) - 32,
554,
),
constraints: BoxConstraints(
maxHeight: min(
controller.responsiveUtils.getSizeScreenHeight(context) - 100,
671,
), ),
), Padding(
clipBehavior: Clip.antiAlias, padding: const EdgeInsets.only(top: 26, bottom: 16),
child: Stack( child: Text(
children: [ appLocalizations.selectTheFolderLocation,
Padding( style: ThemeUtils.textStyleInter600().copyWith(
padding: EdgeInsetsDirectional.only( fontSize: 14,
start: 32, height: 18 / 14,
end: 32, color: Colors.black,
bottom: controller.responsiveUtils.isMobile(context) ? 0 : 16,
), ),
child: Column( maxLines: 1,
mainAxisSize: MainAxisSize.min, overflow: TextOverflow.ellipsis,
crossAxisAlignment: CrossAxisAlignment.start, ),
children: [ ),
Container( Obx(() {
height: 64, final selectedMailbox = controller.selectedMailbox.value;
alignment: Alignment.center, final isFolderModalEnabled = controller.isFolderModalEnabled.isTrue;
child: Text(
appLocalizations.createANewFolder, final folderLocationWidget = AnimatedSize(
style: theme.textTheme.headlineSmall?.copyWith( duration: const Duration(milliseconds: 300),
color: AppColor.m3SurfaceBackground, curve: Curves.easeInOut,
alignment: Alignment.topCenter,
child: isFolderModalEnabled
? Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(
Radius.circular(10),
),
border: Border.all(
color: AppColor.m3Neutral90,
width: 1,
),
), ),
maxLines: 1, padding: const EdgeInsetsDirectional.only(
overflow: TextOverflow.ellipsis, start: 14,
top: 13,
bottom: 13,
end: 4,
),
child: Obx(
() => ModalFolderTreeListWidget(
defaultTree: controller.defaultMailboxTree.value,
personalTree: controller.personalMailboxTree.value,
imagePaths: controller.imagePaths,
listScrollController:
controller.listFolderScrollController,
mailboxIdSelected: selectedMailbox?.id,
onSelectFolderAction: (node) =>
controller.selectMailboxLocation(context, node),
onToggleFolderAction: controller.toggleFolder,
),
),
)
: DefaultButtonArrowDownFieldWidget(
text: selectedMailbox?.getDisplayName(context) ??
appLocalizations.personalFolders,
icon: MailboxIconWidget(
icon: selectedMailbox
?.getMailboxIcon(controller.imagePaths) ??
controller.imagePaths.icFolderMailbox,
),
iconArrowDown: controller.imagePaths.icDropDown,
onTap: () => controller.openFolderModal(context),
), ),
), );
Obx(() {
final folderName = if (isExceedSize) {
controller.selectedMailbox.value?.getDisplayName(context) ?? return Flexible(child: folderLocationWidget);
appLocalizations.personalFolders; } else {
return Center( return folderLocationWidget;
}
}),
ModalListActionButtonWidget(
positiveLabel: appLocalizations.createFolder,
negativeLabel: appLocalizations.cancel,
padding: const EdgeInsets.symmetric(vertical: 25),
onPositiveAction: () => controller.createNewMailbox(context),
onNegativeAction: controller.closeView,
)
];
Widget bodyWidget = Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.all(Radius.circular(16)),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.08),
blurRadius: 24,
offset: const Offset(0, 2),
),
BoxShadow(
color: Colors.black.withValues(alpha: 0.08),
blurRadius: 2,
),
],
),
width: math.min(
currentScreenWidth - 32,
554,
),
constraints: BoxConstraints(
maxHeight: math.min(
currentScreenHeight - 100,
671,
),
),
clipBehavior: Clip.antiAlias,
child: Stack(
children: [
Padding(
padding: isExceedSize
? EdgeInsetsDirectional.only(
start: 32,
end: 32,
bottom: isMobile ? 0 : 16,
)
: EdgeInsets.zero,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 64,
alignment: Alignment.center,
padding: !isExceedSize
? EdgeInsetsDirectional.only(
start: 32,
end: 32,
top: 16,
bottom: isMobile ? 0 : 16,
)
: EdgeInsets.zero,
child: Text( child: Text(
appLocalizations appLocalizations.createANewFolder,
.subtitleDisplayTheFolderNameLocationInFolderCreationModal( style: theme.textTheme.headlineSmall?.copyWith(
folderName, color: AppColor.m3SurfaceBackground,
), ),
style: ThemeUtils.textStyleInter400.copyWith( maxLines: 1,
color: AppColor.steelGrayA540, overflow: TextOverflow.ellipsis,
fontSize: 13, ),
height: 20 / 13, ),
Obx(() {
final folderName = controller.selectedMailbox.value
?.getDisplayName(context) ??
appLocalizations.personalFolders;
return Center(
child: Padding(
padding: !isExceedSize
? EdgeInsetsDirectional.only(
start: 32,
end: 32,
bottom: isMobile ? 0 : 16,
)
: EdgeInsets.zero,
child: Text(
appLocalizations
.subtitleDisplayTheFolderNameLocationInFolderCreationModal(
folderName,
),
style: ThemeUtils.textStyleInter400.copyWith(
color: AppColor.steelGrayA540,
fontSize: 13,
height: 20 / 13,
),
textAlign: TextAlign.center,
),
),
);
}),
const SizedBox(height: 32),
if (isExceedSize)
...fieldsWidgets
else
Expanded(
child: SingleChildScrollView(
physics: const ClampingScrollPhysics(),
child: Padding(
padding: EdgeInsetsDirectional.only(
start: 32,
end: 32,
bottom: isMobile ? 0 : 16,
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: fieldsWidgets,
),
),
), ),
textAlign: TextAlign.center,
), ),
); ],
}), ),
const SizedBox(height: 32),
Obx(
() => LabelInputFieldBuilder(
label: AppLocalizations.of(context).folderName,
hintText: AppLocalizations.of(context).enterTheFolderName,
textEditingController: controller.nameInputController,
focusNode: controller.nameInputFocusNode,
errorText: controller.getErrorInputNameString(context),
arrangeHorizontally: false,
isLabelHasColon: false,
labelStyle: ThemeUtils.textStyleInter600().copyWith(
fontSize: 14,
height: 18 / 14,
color: Colors.black,
),
runSpacing: 16,
inputFieldMaxWidth: double.infinity,
onTextChange: controller.setNewNameMailbox,
),
),
Padding(
padding: const EdgeInsets.only(top: 26, bottom: 16),
child: Text(
appLocalizations.selectTheFolderLocation,
style: ThemeUtils.textStyleInter600().copyWith(
fontSize: 14,
height: 18 / 14,
color: Colors.black,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
Obx(() {
final selectedMailbox = controller.selectedMailbox.value;
final isFolderModalEnabled =
controller.isFolderModalEnabled.isTrue;
return Flexible(
child: AnimatedSize(
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
alignment: Alignment.topCenter,
child: isFolderModalEnabled
? Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(
Radius.circular(10),
),
border: Border.all(
color: AppColor.m3Neutral90,
width: 1,
),
),
padding: const EdgeInsetsDirectional.only(
start: 14,
top: 13,
bottom: 13,
end: 4,
),
child: Obx(() => ModalFolderTreeListWidget(
defaultTree: controller.defaultMailboxTree.value,
personalTree: controller.personalMailboxTree.value,
imagePaths: controller.imagePaths,
listScrollController: controller.listFolderScrollController,
mailboxIdSelected: selectedMailbox?.id,
onSelectFolderAction: (node) => controller.selectMailboxLocation(context, node),
onToggleFolderAction: controller.toggleFolder,
)),
)
: DefaultButtonArrowDownFieldWidget(
text: selectedMailbox?.getDisplayName(context) ??
appLocalizations.personalFolders,
icon: MailboxIconWidget(
icon: selectedMailbox?.getMailboxIcon(controller.imagePaths)
?? controller.imagePaths.icFolderMailbox,
),
iconArrowDown: controller.imagePaths.icDropDown,
onTap: () => controller.openFolderModal(context),
),
),
);
}),
ModalListActionButtonWidget(
positiveLabel: appLocalizations.createFolder,
negativeLabel: appLocalizations.cancel,
padding: const EdgeInsets.symmetric(vertical: 25),
onPositiveAction: () => controller.createNewMailbox(context),
onNegativeAction: controller.closeView,
)
],
), ),
), DefaultCloseButtonWidget(
DefaultCloseButtonWidget( iconClose: controller.imagePaths.icCloseDialog,
iconClose: controller.imagePaths.icCloseDialog, onTapActionCallback: controller.closeView,
onTapActionCallback: controller.closeView, ),
), ],
],
),
);
bodyWidget = Center(child: bodyWidget);
if (PlatformInfo.isMobile) {
bodyWidget = GestureDetector(
onTap: controller.closeView,
child: Scaffold(
backgroundColor: AppColor.blackAlpha20,
body: GestureDetector(
onTap: controller.nameInputFocusNode.unfocus,
child: bodyWidget,
),
), ),
); );
}
return bodyWidget; bodyWidget = Center(child: bodyWidget);
if (PlatformInfo.isMobile) {
bodyWidget = GestureDetector(
onTap: controller.closeView,
child: Scaffold(
backgroundColor: AppColor.blackAlpha20,
body: GestureDetector(
onTap: controller.nameInputFocusNode.unfocus,
child: bodyWidget,
),
),
);
}
return bodyWidget;
});
} }
} }