From e7e43306f3701c90f4137e23c5b4a704e7368ee4 Mon Sep 17 00:00:00 2001
From: DatDang <tddang@linagora.com>
Date: Mon, 11 Mar 2024 16:50:05 +0700
Subject: [PATCH 1/2] Fix bottom buttons overflow when button content is too
 long

---
 lib/multiple_view_date_range_picker.dart | 133 +++++++++++++++++------
 1 file changed, 99 insertions(+), 34 deletions(-)

diff --git a/lib/multiple_view_date_range_picker.dart b/lib/multiple_view_date_range_picker.dart
index 3497090..1c85d62 100644
--- a/lib/multiple_view_date_range_picker.dart
+++ b/lib/multiple_view_date_range_picker.dart
@@ -66,6 +66,11 @@ class MultipleViewDateRangePicker extends StatefulWidget {
 
 class _MultipleViewDateRangePickerState extends State<MultipleViewDateRangePicker> {
   final String dateTimePattern = 'dd/MM/yyyy';
+  static const _desktopDateRangePickerWidth = 650.0;
+  static const _tabletDateRangePickerBottomPadding = 16.0;
+  final _startAndEndDateInputTabletKey = GlobalKey();
+  final _bottomViewTabletConfirmationButtonsKey = GlobalKey();
+  bool _bottomViewTabletConfirmationButtonsOverflow = false;
 
   late DateRangePickerController _datePickerController;
   late TextEditingController _startDateInputController;
@@ -88,6 +93,30 @@ class _MultipleViewDateRangePickerState extends State<MultipleViewDateRangePicke
     _initDebounceTimeForDate();
     _updateDateTextInput();
     super.initState();
+    _checkIfTabletBottomButtonIsOverflowed();
+  }
+
+  void _checkIfTabletBottomButtonIsOverflowed() {
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      final startAndEndDateInputTabletRenderBox = _startAndEndDateInputTabletKey
+        .currentContext?.findRenderObject() as RenderBox?;
+      final bottomViewTabletConfirmationButtonsRenderBox = _bottomViewTabletConfirmationButtonsKey
+        .currentContext?.findRenderObject() as RenderBox?;
+      
+      if (startAndEndDateInputTabletRenderBox == null
+        || bottomViewTabletConfirmationButtonsRenderBox == null) return;
+    
+      final startAndEndDateInputTabletWidth = startAndEndDateInputTabletRenderBox
+        .size.width;
+      final bottomViewTabletConfirmationButtonsWidth = bottomViewTabletConfirmationButtonsRenderBox
+        .size.width;
+      if (bottomViewTabletConfirmationButtonsWidth + startAndEndDateInputTabletWidth 
+        > _desktopDateRangePickerWidth - _tabletDateRangePickerBottomPadding * 2) {
+          setState(() {
+            _bottomViewTabletConfirmationButtonsOverflow = true;
+          });
+      }
+    });
   }
 
   void _initDebounceTimeForDate() {
@@ -112,7 +141,7 @@ class _MultipleViewDateRangePickerState extends State<MultipleViewDateRangePicke
     return Center(
       child: Container(
         height: 500 ,
-        width: ResponsiveUtils.isDesktop(context) ? 650 : 500,
+        width: ResponsiveUtils.isDesktop(context) ? _desktopDateRangePickerWidth : 500,
         decoration: BoxDecoration(
           color: Colors.white,
           borderRadius: BorderRadius.all(Radius.circular(widget.radius ?? 16)),
@@ -433,44 +462,26 @@ class _MultipleViewDateRangePickerState extends State<MultipleViewDateRangePicke
           ],
         ),
       );
-    } else {
+    } else if (!_bottomViewTabletConfirmationButtonsOverflow) {
       return Padding(
-        padding: const EdgeInsets.all(16),
+        padding: EdgeInsets.all(_tabletDateRangePickerBottomPadding),
         child: Row(children: [
-          _buildDateInputFormTablet(context, DateType.start),
-          Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 12),
-            child: SvgPicture.asset(
-              ImagePaths.icDateRange,
-              package: ImagePaths.packageName
-            )
-          ),
-          _buildDateInputFormTablet(context, DateType.end),
+          _startAndEndDateInputFormTablet(context),
           const Spacer(),
-          WrapTextButton(
-            widget.cancelText,
-            textStyle: const TextStyle(
-              color: ColorsUtils.colorButton,
-              fontWeight: FontWeight.w500,
-              fontSize: 16
-            ),
-            padding: const EdgeInsets.symmetric(horizontal: 25),
-            backgroundColor: ColorsUtils.colorButtonDisable,
-            onTap: Navigator.maybeOf(context)?.maybePop,
-          ),
-          const SizedBox(width: 12),
-          WrapTextButton(
-            widget.confirmText,
-            padding: const EdgeInsets.symmetric(horizontal: 20),
-            onTap: () {
-              widget.selectDateRangeActionCallback?.call(_startDate, _endDate);
-              if (widget.autoClose) {
-                Navigator.maybeOf(context)?.maybePop();
-              }
-            },
-          )
+          _bottomViewTabletConfirmationButtons(context),
         ]),
       );
+    } else {
+      return Padding(
+        padding: EdgeInsets.all(_tabletDateRangePickerBottomPadding),
+        child: Column(
+          children: [
+            _startAndEndDateInputFormTablet(context),
+            const SizedBox(height: 12),
+            _bottomViewTabletConfirmationButtons(context),
+          ],
+        ),
+      );
     }
   }
 
@@ -504,6 +515,60 @@ class _MultipleViewDateRangePickerState extends State<MultipleViewDateRangePicke
     );
   }
 
+  Widget _startAndEndDateInputFormTablet(BuildContext context) {
+    return Row(
+      key: _startAndEndDateInputTabletKey,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        _buildDateInputFormTablet(context, DateType.start),
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 12),
+          child: SvgPicture.asset(
+            ImagePaths.icDateRange,
+            package: ImagePaths.packageName,
+          ),
+        ),
+        _buildDateInputFormTablet(context, DateType.end),
+        if (!_bottomViewTabletConfirmationButtonsOverflow)
+          const SizedBox(width: 12),
+      ],
+    );
+  }
+
+  Widget _bottomViewTabletConfirmationButtons(BuildContext context) {
+    return Row(
+      key: _bottomViewTabletConfirmationButtonsKey,
+      mainAxisAlignment: MainAxisAlignment.end,
+      children: [
+        WrapTextButton(
+          widget.cancelText,
+          textStyle: const TextStyle(
+            color: ColorsUtils.colorButton,
+            fontWeight: FontWeight.w500,
+            fontSize: 16,
+          ),
+          padding: const EdgeInsets.symmetric(horizontal: 25),
+          backgroundColor: ColorsUtils.colorButtonDisable,
+          onTap: Navigator.maybeOf(context)?.maybePop,
+        ),
+        const SizedBox(width: 12),
+        Flexible(
+          flex: _bottomViewTabletConfirmationButtonsOverflow ? 1 : 0,
+          child: WrapTextButton(
+            widget.confirmText,
+            padding: const EdgeInsets.symmetric(horizontal: 20),
+            onTap: () {
+              widget.selectDateRangeActionCallback?.call(_startDate, _endDate);
+              if (widget.autoClose) {
+                Navigator.maybeOf(context)?.maybePop();
+              }
+            },
+          ),
+        ),
+      ],
+    );
+  }
+
   void _onSelectionChanged(DateRangePickerSelectionChangedArgs args) {
     final pickerDateRange = args.value;
     log('_MultipleViewDateRangePickerState::_onSelectionChanged():pickerDateRange: $pickerDateRange');

From 033c6583bb2dd0bb17cfa8e1e3a391837fbff0a9 Mon Sep 17 00:00:00 2001
From: DatDang <tddang@linagora.com>
Date: Tue, 12 Mar 2024 14:42:19 +0700
Subject: [PATCH 2/2] Add padding to bottom buttons in mobile

---
 lib/multiple_view_date_range_picker.dart | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/multiple_view_date_range_picker.dart b/lib/multiple_view_date_range_picker.dart
index 1c85d62..76af817 100644
--- a/lib/multiple_view_date_range_picker.dart
+++ b/lib/multiple_view_date_range_picker.dart
@@ -414,6 +414,7 @@ class _MultipleViewDateRangePickerState extends State<MultipleViewDateRangePicke
         Expanded(
           child: WrapTextButton(
             widget.cancelText,
+            padding: const EdgeInsets.symmetric(horizontal: 8),
             textStyle: const TextStyle(
               color: ColorsUtils.colorButton,
               fontWeight: FontWeight.w500,
@@ -427,6 +428,7 @@ class _MultipleViewDateRangePickerState extends State<MultipleViewDateRangePicke
         Expanded(
           child: WrapTextButton(
             widget.confirmText,
+            padding: const EdgeInsets.symmetric(horizontal: 8),
             onTap: () {
               widget.selectDateRangeActionCallback?.call(_startDate, _endDate);
               if (widget.autoClose) {