TF-1709 Add select sort type dropdown

(cherry picked from commit 58ed2474786639e76245eed723129dc80487917e)
2023-11-11 00:30:27 +07:00
parent b96b93f1c5
commit 5f9b69f693
2 changed files with 148 additions and 0 deletions
@@ -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);
+}
@@ -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<EmailSortOrderType>(
+          isExpanded: true,
+          items: EmailSortOrderType.values
+            .map((sortType) => DropdownMenuItem<EmailSortOrderType>(
+              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<double>(SortByDropdownStyle.scrollbarThickness),
+              thumbVisibility: MaterialStateProperty.all<bool>(true),
+            )
+          ),
+          iconStyleData: IconStyleData(
+            icon: SvgPicture.asset(imagePaths.icDropDown),
+          ),
+          menuItemStyleData: SortByDropdownStyle.menuItemStyleData
+        )
+      )
+    );
+  }
+}