Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix bottom buttons overflow when button content is too long #13

Merged
merged 2 commits into from
Mar 13, 2024
Merged

Fix bottom buttons overflow when button content is too long #13

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e7e4330
Fix bottom buttons overflow when button content is too long
tddang-linagora Mar 11, 2024
033c658
Add padding to bottom buttons in mobile
tddang-linagora Mar 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 101 additions & 34 deletions lib/multiple_view_date_range_picker.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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() {
Expand All @@ -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)),
Expand Down Expand Up @@ -385,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,
Expand All @@ -398,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) {
Expand Down Expand Up @@ -433,44 +464,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),
],
),
);
}
}

Expand Down Expand Up @@ -504,6 +517,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');
Expand Down
Loading