TF-4002 Avoid overflow when change responsive

lib/features/mailbox_creator/presentation/mailbox_creator_view.dart

@@ -1,6 +1,7 @@
-import 'dart:math';
+import 'dart:math' as math;
 
 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/utils/platform_info.dart';
 import 'package:flutter/material.dart';
@@ -26,81 +27,19 @@ class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
     final appLocalizations = AppLocalizations.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 = [
-          ),
-          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,
-        ),
-      ),
-      clipBehavior: Clip.antiAlias,
-      child: Stack(
-        children: [
-          Padding(
-            padding: EdgeInsetsDirectional.only(
-              start: 32,
-              end: 32,
-              bottom: controller.responsiveUtils.isMobile(context) ? 0 : 16,
-            ),
-            child: Column(
-              mainAxisSize: MainAxisSize.min,
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Container(
-                  height: 64,
-                  alignment: Alignment.center,
-                  child: Text(
-                    appLocalizations.createANewFolder,
-                    style: theme.textTheme.headlineSmall?.copyWith(
-                      color: AppColor.m3SurfaceBackground,
-                    ),
-                    maxLines: 1,
-                    overflow: TextOverflow.ellipsis,
-                  ),
-                ),
-                Obx(() {
-                  final folderName =
-                      controller.selectedMailbox.value?.getDisplayName(context) ??
-                          appLocalizations.personalFolders;
-                  return Center(
-                    child: Text(
-                      appLocalizations
-                          .subtitleDisplayTheFolderNameLocationInFolderCreationModal(
-                        folderName,
-                      ),
-                      style: ThemeUtils.textStyleInter400.copyWith(
-                        color: AppColor.steelGrayA540,
-                        fontSize: 13,
-                        height: 20 / 13,
-                      ),
-                      textAlign: TextAlign.center,
-                    ),
-                  );
-                }),
-                const SizedBox(height: 32),
         Obx(
           () => LabelInputFieldBuilder(
-                    label: AppLocalizations.of(context).folderName,
+            label: appLocalizations.folderName,
-                    hintText: AppLocalizations.of(context).enterTheFolderName,
+            hintText: appLocalizations.enterTheFolderName,
             textEditingController: controller.nameInputController,
             focusNode: controller.nameInputFocusNode,
             errorText: controller.getErrorInputNameString(context),
@@ -131,11 +70,9 @@ class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
         ),
         Obx(() {
           final selectedMailbox = controller.selectedMailbox.value;
-                  final isFolderModalEnabled =
+          final isFolderModalEnabled = controller.isFolderModalEnabled.isTrue;
-                      controller.isFolderModalEnabled.isTrue;
 
-                  return Flexible(
+          final folderLocationWidget = AnimatedSize(
-                    child: AnimatedSize(
             duration: const Duration(milliseconds: 300),
             curve: Curves.easeInOut,
             alignment: Alignment.topCenter,
@@ -156,28 +93,38 @@ class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
                       bottom: 13,
                       end: 4,
                     ),
-                              child: Obx(() => ModalFolderTreeListWidget(
+                    child: Obx(
+                      () => ModalFolderTreeListWidget(
                         defaultTree: controller.defaultMailboxTree.value,
                         personalTree: controller.personalMailboxTree.value,
                         imagePaths: controller.imagePaths,
-                                listScrollController: controller.listFolderScrollController,
+                        listScrollController:
+                            controller.listFolderScrollController,
                         mailboxIdSelected: selectedMailbox?.id,
-                                onSelectFolderAction: (node) => controller.selectMailboxLocation(context, node),
+                        onSelectFolderAction: (node) =>
+                            controller.selectMailboxLocation(context, node),
                         onToggleFolderAction: controller.toggleFolder,
-                              )),
+                      ),
+                    ),
                   )
                 : DefaultButtonArrowDownFieldWidget(
                     text: selectedMailbox?.getDisplayName(context) ??
                         appLocalizations.personalFolders,
                     icon: MailboxIconWidget(
-                                icon: selectedMailbox?.getMailboxIcon(controller.imagePaths)
+                      icon: selectedMailbox
-                                    ?? controller.imagePaths.icFolderMailbox,
+                              ?.getMailboxIcon(controller.imagePaths) ??
+                          controller.imagePaths.icFolderMailbox,
                     ),
                     iconArrowDown: controller.imagePaths.icDropDown,
                     onTap: () => controller.openFolderModal(context),
                   ),
-                    ),
           );
+
+          if (isExceedSize) {
+            return Flexible(child: folderLocationWidget);
+          } else {
+            return folderLocationWidget;
+          }
         }),
         ModalListActionButtonWidget(
           positiveLabel: appLocalizations.createFolder,
@@ -186,6 +133,118 @@ class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
           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(
+                      appLocalizations.createANewFolder,
+                      style: theme.textTheme.headlineSmall?.copyWith(
+                        color: AppColor.m3SurfaceBackground,
+                      ),
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                    ),
+                  ),
+                  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,
+                          ),
+                        ),
+                      ),
+                    ),
                 ],
               ),
             ),
@@ -213,5 +272,6 @@ class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
       }
 
       return bodyWidget;
+    });
   }
 }