From 5f9b69f693f6ef07cf45a898e30b34651f88a3f9 Mon Sep 17 00:00:00 2001 From: hieubt Date: Sat, 11 Nov 2023 00:30:27 +0700 Subject: [PATCH] TF-1709 Add select sort type dropdown (cherry picked from commit 58ed2474786639e76245eed723129dc80487917e) --- .../styles/sort_by_drop_down_style.dart | 29 +++++ .../sort_by_drop_down_button.dart | 119 ++++++++++++++++++ 2 files changed, 148 insertions(+) create mode 100644 lib/features/mailbox_dashboard/presentation/styles/sort_by_drop_down_style.dart create mode 100644 lib/features/mailbox_dashboard/presentation/widgets/advanced_search/sort_by_drop_down_button.dart diff --git a/lib/features/mailbox_dashboard/presentation/styles/sort_by_drop_down_style.dart b/lib/features/mailbox_dashboard/presentation/styles/sort_by_drop_down_style.dart new file mode 100644 index 000000000..709dd6091 --- /dev/null +++ b/lib/features/mailbox_dashboard/presentation/styles/sort_by_drop_down_style.dart @@ -0,0 +1,29 @@ +import 'package:dropdown_button2/dropdown_button2.dart'; +import 'package:flutter/material.dart'; + +class SortByDropdownStyle { + static const int dropdownElevation = 4; + + static const double height = 44; + static const double buttonBorderWidth = 0.5; + static const double dropdownMaxHeight = 332; + static const double scrollbarThickness = 6; + static const double checkedIconSize = 20; + + static const Offset dropdownOffset = Offset(0.0, -8.0); + + static const BoxDecoration dropdownDecoration = BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(10)), + color: Colors.white + ); + + static const EdgeInsetsGeometry buttonPadding = EdgeInsets.only(left: 12, right: 10); + static const MenuItemStyleData menuItemStyleData = MenuItemStyleData( + height: height, + padding: EdgeInsets.symmetric(horizontal: 12), + ); + + static const BorderRadius buttonBorderRadius = BorderRadius.all(Radius.circular(10)); + + static const Radius dropdownScrollbarRadius = Radius.circular(40); +} \ No newline at end of file diff --git a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/sort_by_drop_down_button.dart b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/sort_by_drop_down_button.dart new file mode 100644 index 000000000..c3adf22e1 --- /dev/null +++ b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/sort_by_drop_down_button.dart @@ -0,0 +1,119 @@ +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:core/presentation/resources/image_paths.dart'; +import 'package:core/presentation/utils/style_utils.dart'; +import 'package:dropdown_button2/dropdown_button2.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:pointer_interceptor/pointer_interceptor.dart'; +import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/email_sort_order_type.dart'; +import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/styles/sort_by_drop_down_style.dart'; + +class SortByDropDownButton extends StatelessWidget { + + final ImagePaths imagePaths; + final EmailSortOrderType? sortOrderSelected; + final Function(EmailSortOrderType?)? onSortOrderSelected; + + const SortByDropDownButton({ + Key? key, + required this.imagePaths, + this.sortOrderSelected, + this.onSortOrderSelected, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return DropdownButtonHideUnderline( + child: PointerInterceptor( + child: DropdownButton2( + isExpanded: true, + items: EmailSortOrderType.values + .map((sortType) => DropdownMenuItem( + value: sortType, + child: PointerInterceptor( + child: Container( + color: Colors.transparent, + height: SortByDropdownStyle.height, + child: Row( + children: [ + Expanded( + child: Text( + sortType.getTitle(context), + style: sortType.getTextStyle(isInDropdown: true), + maxLines: 1, + softWrap: CommonTextStyle.defaultSoftWrap, + overflow: CommonTextStyle.defaultTextOverFlow, + ), + ), + if (sortType == sortOrderSelected) + SvgPicture.asset( + imagePaths.icChecked, + width: SortByDropdownStyle.checkedIconSize, + height: SortByDropdownStyle.checkedIconSize, + fit: BoxFit.fill, + ) + ], + ), + ) + ) + )).toList(), + value: sortOrderSelected, + customButton: Container( + height: SortByDropdownStyle.height, + decoration: BoxDecoration( + borderRadius: SortByDropdownStyle.buttonBorderRadius, + border: Border.all( + color: AppColor.colorInputBorderCreateMailbox, + width: SortByDropdownStyle.buttonBorderWidth, + ), + color: AppColor.colorInputBackgroundCreateMailbox + ), + padding: SortByDropdownStyle.buttonPadding, + child: Row( + children: [ + Expanded( + child: Text( + sortOrderSelected?.getTitle(context) ?? '', + style: sortOrderSelected?.getTextStyle(isInDropdown: false), + maxLines: 1, + softWrap: CommonTextStyle.defaultSoftWrap, + overflow: CommonTextStyle.defaultTextOverFlow, + ) + ), + SvgPicture.asset(imagePaths.icDropDown) + ] + ), + ), + onChanged: onSortOrderSelected, + buttonStyleData: ButtonStyleData( + height: SortByDropdownStyle.height, + padding: SortByDropdownStyle.buttonPadding, + decoration: BoxDecoration( + borderRadius: SortByDropdownStyle.buttonBorderRadius, + border: Border.all( + color: AppColor.colorInputBorderCreateMailbox, + width: SortByDropdownStyle.buttonBorderWidth, + ), + color: AppColor.colorInputBackgroundCreateMailbox + ) + ), + dropdownStyleData: DropdownStyleData( + maxHeight: SortByDropdownStyle.dropdownMaxHeight, + decoration: SortByDropdownStyle.dropdownDecoration, + elevation: SortByDropdownStyle.dropdownElevation, + offset: SortByDropdownStyle.dropdownOffset, + scrollbarTheme: ScrollbarThemeData( + radius: SortByDropdownStyle.dropdownScrollbarRadius, + thickness: MaterialStateProperty.all(SortByDropdownStyle.scrollbarThickness), + thumbVisibility: MaterialStateProperty.all(true), + ) + ), + iconStyleData: IconStyleData( + icon: SvgPicture.asset(imagePaths.icDropDown), + ), + menuItemStyleData: SortByDropdownStyle.menuItemStyleData + ) + ) + ); + } +}