From 255ec9568ca1f3ca1bcfd16d4b540ea946784d3e Mon Sep 17 00:00:00 2001
From: doonfrs <doonfrs@gmail.com>
Date: Fri, 8 Dec 2023 00:38:19 +0300
Subject: [PATCH] Customize filter column by @RamshaFarheen
 https://github.com/bosskmk/pluto_grid/pull/739

---
 lib/src/manager/state/column_state.dart     |  18 +-
 lib/src/model/pluto_column.dart             |  16 ++
 lib/src/pluto_grid_configuration.dart       | 244 ++++++++++----------
 lib/src/pluto_grid_popup.dart               |  11 +-
 lib/src/ui/columns/pluto_column_filter.dart |  43 ++--
 5 files changed, 185 insertions(+), 147 deletions(-)

diff --git a/lib/src/manager/state/column_state.dart b/lib/src/manager/state/column_state.dart
index 3c9e5316e..525198431 100644
--- a/lib/src/manager/state/column_state.dart
+++ b/lib/src/manager/state/column_state.dart
@@ -754,15 +754,15 @@ mixin ColumnState implements IPlutoGridState {
 
     final columns = [
       PlutoColumn(
-        title: configuration.localeText.setColumnsTitle,
-        field: titleField,
-        type: PlutoColumnType.text(),
-        enableRowChecked: true,
-        enableEditingMode: false,
-        enableDropToResize: true,
-        enableContextMenu: false,
-        enableColumnDrag: false,
-      ),
+          title: configuration.localeText.setColumnsTitle,
+          field: titleField,
+          type: PlutoColumnType.text(),
+          enableRowChecked: true,
+          enableEditingMode: false,
+          enableDropToResize: true,
+          enableContextMenu: false,
+          enableColumnDrag: false,
+          backgroundColor: configuration.style.filterHeaderColor),
       PlutoColumn(
         title: 'hidden column',
         field: columnField,
diff --git a/lib/src/model/pluto_column.dart b/lib/src/model/pluto_column.dart
index a79d723f1..d8145c7f0 100644
--- a/lib/src/model/pluto_column.dart
+++ b/lib/src/model/pluto_column.dart
@@ -176,6 +176,18 @@ class PlutoColumn {
   /// Valid only when [enableContextMenu] is activated.
   bool enableFilterMenuItem;
 
+  ///Set hint text for filter field
+  String? filterHintText;
+
+  ///Set hint text color for filter field
+  Color? filterHintTextColor;
+
+  ///Set suffix icon for filter field
+  Icon? filterSuffixIcon;
+
+  ///Set custom widget
+  Widget? filterWidget;
+
   /// Displays Hide column menu in the column context menu.
   /// Valid only when [enableContextMenu] is activated.
   bool enableHideColumnMenuItem;
@@ -221,6 +233,10 @@ class PlutoColumn {
     this.enableContextMenu = true,
     this.enableDropToResize = true,
     this.enableFilterMenuItem = true,
+    this.filterHintText,
+    this.filterHintTextColor,
+    this.filterSuffixIcon,
+    this.filterWidget,
     this.enableHideColumnMenuItem = true,
     this.enableSetColumnsMenuItem = true,
     this.enableAutoEditing = false,
diff --git a/lib/src/pluto_grid_configuration.dart b/lib/src/pluto_grid_configuration.dart
index bf25c5171..a569697af 100644
--- a/lib/src/pluto_grid_configuration.dart
+++ b/lib/src/pluto_grid_configuration.dart
@@ -245,63 +245,66 @@ class PlutoGridStyleConfig {
     this.rowGroupEmptyIcon = Icons.noise_control_off,
     this.gridBorderRadius = BorderRadius.zero,
     this.gridPopupBorderRadius = BorderRadius.zero,
+    this.filterHeaderColor,
+    this.filterHeaderIconColor,
   });
 
-  const PlutoGridStyleConfig.dark({
-    this.enableGridBorderShadow = false,
-    this.enableColumnBorderVertical = true,
-    this.enableColumnBorderHorizontal = true,
-    this.enableCellBorderVertical = true,
-    this.enableCellBorderHorizontal = true,
-    this.enableRowColorAnimation = false,
-    this.gridBackgroundColor = const Color(0xFF111111),
-    this.rowColor = const Color(0xFF111111),
-    this.oddRowColor,
-    this.evenRowColor,
-    this.activatedColor = const Color(0xFF313131),
-    this.checkedColor = const Color(0x11202020),
-    this.cellColorInEditState = const Color(0xFF666666),
-    this.cellColorInReadOnlyState = const Color(0xFF222222),
-    this.cellColorGroupedRow,
-    this.dragTargetColumnColor = const Color(0xFF313131),
-    this.iconColor = Colors.white38,
-    this.disabledIconColor = Colors.white12,
-    this.menuBackgroundColor = const Color(0xFF414141),
-    this.gridBorderColor = const Color(0xFF666666),
-    this.borderColor = const Color(0xFF222222),
-    this.activatedBorderColor = const Color(0xFFFFFFFF),
-    this.inactivatedBorderColor = const Color(0xFF666666),
-    this.iconSize = 18,
-    this.rowHeight = PlutoGridSettings.rowHeight,
-    this.columnHeight = PlutoGridSettings.rowHeight,
-    this.columnFilterHeight = PlutoGridSettings.rowHeight,
-    this.defaultColumnTitlePadding = PlutoGridSettings.columnTitlePadding,
-    this.defaultColumnFilterPadding = PlutoGridSettings.columnFilterPadding,
-    this.defaultCellPadding = PlutoGridSettings.cellPadding,
-    this.columnTextStyle = const TextStyle(
-      color: Colors.white,
-      decoration: TextDecoration.none,
-      fontSize: 14,
-      fontWeight: FontWeight.w600,
-    ),
-    this.cellTextStyle = const TextStyle(
-      color: Colors.white,
-      fontSize: 14,
-    ),
-    this.columnContextIcon = Icons.dehaze,
-    this.columnResizeIcon = Icons.code_sharp,
-    this.columnAscendingIcon,
-    this.columnDescendingIcon,
-    this.rowGroupExpandedIcon = Icons.keyboard_arrow_down,
-    this.rowGroupCollapsedIcon = const IconData(
-      0xe355,
-      matchTextDirection: true,
-      fontFamily: 'MaterialIcons',
-    ),
-    this.rowGroupEmptyIcon = Icons.noise_control_off,
-    this.gridBorderRadius = BorderRadius.zero,
-    this.gridPopupBorderRadius = BorderRadius.zero,
-  });
+  const PlutoGridStyleConfig.dark(
+      {this.enableGridBorderShadow = false,
+      this.enableColumnBorderVertical = true,
+      this.enableColumnBorderHorizontal = true,
+      this.enableCellBorderVertical = true,
+      this.enableCellBorderHorizontal = true,
+      this.enableRowColorAnimation = false,
+      this.gridBackgroundColor = const Color(0xFF111111),
+      this.rowColor = const Color(0xFF111111),
+      this.oddRowColor,
+      this.evenRowColor,
+      this.activatedColor = const Color(0xFF313131),
+      this.checkedColor = const Color(0x11202020),
+      this.cellColorInEditState = const Color(0xFF666666),
+      this.cellColorInReadOnlyState = const Color(0xFF222222),
+      this.cellColorGroupedRow,
+      this.dragTargetColumnColor = const Color(0xFF313131),
+      this.iconColor = Colors.white38,
+      this.disabledIconColor = Colors.white12,
+      this.menuBackgroundColor = const Color(0xFF414141),
+      this.gridBorderColor = const Color(0xFF666666),
+      this.borderColor = const Color(0xFF222222),
+      this.activatedBorderColor = const Color(0xFFFFFFFF),
+      this.inactivatedBorderColor = const Color(0xFF666666),
+      this.iconSize = 18,
+      this.rowHeight = PlutoGridSettings.rowHeight,
+      this.columnHeight = PlutoGridSettings.rowHeight,
+      this.columnFilterHeight = PlutoGridSettings.rowHeight,
+      this.defaultColumnTitlePadding = PlutoGridSettings.columnTitlePadding,
+      this.defaultColumnFilterPadding = PlutoGridSettings.columnFilterPadding,
+      this.defaultCellPadding = PlutoGridSettings.cellPadding,
+      this.columnTextStyle = const TextStyle(
+        color: Colors.white,
+        decoration: TextDecoration.none,
+        fontSize: 14,
+        fontWeight: FontWeight.w600,
+      ),
+      this.cellTextStyle = const TextStyle(
+        color: Colors.white,
+        fontSize: 14,
+      ),
+      this.columnContextIcon = Icons.dehaze,
+      this.columnResizeIcon = Icons.code_sharp,
+      this.columnAscendingIcon,
+      this.columnDescendingIcon,
+      this.rowGroupExpandedIcon = Icons.keyboard_arrow_down,
+      this.rowGroupCollapsedIcon = const IconData(
+        0xe355,
+        matchTextDirection: true,
+        fontFamily: 'MaterialIcons',
+      ),
+      this.rowGroupEmptyIcon = Icons.noise_control_off,
+      this.gridBorderRadius = BorderRadius.zero,
+      this.gridPopupBorderRadius = BorderRadius.zero,
+      this.filterHeaderColor,
+      this.filterHeaderIconColor});
 
   /// Enable borderShadow in [PlutoGrid].
   final bool enableGridBorderShadow;
@@ -448,6 +451,12 @@ class PlutoGridStyleConfig {
   /// Apply border radius to popup opened inside [PlutoGrid].
   final BorderRadiusGeometry gridPopupBorderRadius;
 
+  /// Set color of filter popup header
+  final Color? filterHeaderColor;
+
+  /// Set color of filter popup header icon
+  final Color? filterHeaderIconColor;
+
   PlutoGridStyleConfig copyWith({
     bool? enableGridBorderShadow,
     bool? enableColumnBorderVertical,
@@ -492,68 +501,69 @@ class PlutoGridStyleConfig {
     BorderRadiusGeometry? gridPopupBorderRadius,
   }) {
     return PlutoGridStyleConfig(
-      enableGridBorderShadow:
-          enableGridBorderShadow ?? this.enableGridBorderShadow,
-      enableColumnBorderVertical:
-          enableColumnBorderVertical ?? this.enableColumnBorderVertical,
-      enableColumnBorderHorizontal:
-          enableColumnBorderHorizontal ?? this.enableColumnBorderHorizontal,
-      enableCellBorderVertical:
-          enableCellBorderVertical ?? this.enableCellBorderVertical,
-      enableCellBorderHorizontal:
-          enableCellBorderHorizontal ?? this.enableCellBorderHorizontal,
-      enableRowColorAnimation:
-          enableRowColorAnimation ?? this.enableRowColorAnimation,
-      gridBackgroundColor: gridBackgroundColor ?? this.gridBackgroundColor,
-      rowColor: rowColor ?? this.rowColor,
-      oddRowColor: oddRowColor == null ? this.oddRowColor : oddRowColor.value,
-      evenRowColor:
-          evenRowColor == null ? this.evenRowColor : evenRowColor.value,
-      activatedColor: activatedColor ?? this.activatedColor,
-      checkedColor: checkedColor ?? this.checkedColor,
-      cellColorInEditState: cellColorInEditState ?? this.cellColorInEditState,
-      cellColorInReadOnlyState:
-          cellColorInReadOnlyState ?? this.cellColorInReadOnlyState,
-      cellColorGroupedRow: cellColorGroupedRow == null
-          ? this.cellColorGroupedRow
-          : cellColorGroupedRow.value,
-      dragTargetColumnColor:
-          dragTargetColumnColor ?? this.dragTargetColumnColor,
-      iconColor: iconColor ?? this.iconColor,
-      disabledIconColor: disabledIconColor ?? this.disabledIconColor,
-      menuBackgroundColor: menuBackgroundColor ?? this.menuBackgroundColor,
-      gridBorderColor: gridBorderColor ?? this.gridBorderColor,
-      borderColor: borderColor ?? this.borderColor,
-      activatedBorderColor: activatedBorderColor ?? this.activatedBorderColor,
-      inactivatedBorderColor:
-          inactivatedBorderColor ?? this.inactivatedBorderColor,
-      iconSize: iconSize ?? this.iconSize,
-      rowHeight: rowHeight ?? this.rowHeight,
-      columnHeight: columnHeight ?? this.columnHeight,
-      columnFilterHeight: columnFilterHeight ?? this.columnFilterHeight,
-      defaultColumnTitlePadding:
-          defaultColumnTitlePadding ?? this.defaultColumnTitlePadding,
-      defaultColumnFilterPadding:
-          defaultColumnFilterPadding ?? this.defaultColumnFilterPadding,
-      defaultCellPadding: defaultCellPadding ?? this.defaultCellPadding,
-      columnTextStyle: columnTextStyle ?? this.columnTextStyle,
-      cellTextStyle: cellTextStyle ?? this.cellTextStyle,
-      columnContextIcon: columnContextIcon ?? this.columnContextIcon,
-      columnResizeIcon: columnResizeIcon ?? this.columnResizeIcon,
-      columnAscendingIcon: columnAscendingIcon == null
-          ? this.columnAscendingIcon
-          : columnAscendingIcon.value,
-      columnDescendingIcon: columnDescendingIcon == null
-          ? this.columnDescendingIcon
-          : columnDescendingIcon.value,
-      rowGroupExpandedIcon: rowGroupExpandedIcon ?? this.rowGroupExpandedIcon,
-      rowGroupCollapsedIcon:
-          rowGroupCollapsedIcon ?? this.rowGroupCollapsedIcon,
-      rowGroupEmptyIcon: rowGroupEmptyIcon ?? this.rowGroupEmptyIcon,
-      gridBorderRadius: gridBorderRadius ?? this.gridBorderRadius,
-      gridPopupBorderRadius:
-          gridPopupBorderRadius ?? this.gridPopupBorderRadius,
-    );
+        enableGridBorderShadow:
+            enableGridBorderShadow ?? this.enableGridBorderShadow,
+        enableColumnBorderVertical:
+            enableColumnBorderVertical ?? this.enableColumnBorderVertical,
+        enableColumnBorderHorizontal:
+            enableColumnBorderHorizontal ?? this.enableColumnBorderHorizontal,
+        enableCellBorderVertical:
+            enableCellBorderVertical ?? this.enableCellBorderVertical,
+        enableCellBorderHorizontal:
+            enableCellBorderHorizontal ?? this.enableCellBorderHorizontal,
+        enableRowColorAnimation:
+            enableRowColorAnimation ?? this.enableRowColorAnimation,
+        gridBackgroundColor: gridBackgroundColor ?? this.gridBackgroundColor,
+        rowColor: rowColor ?? this.rowColor,
+        oddRowColor: oddRowColor == null ? this.oddRowColor : oddRowColor.value,
+        evenRowColor:
+            evenRowColor == null ? this.evenRowColor : evenRowColor.value,
+        activatedColor: activatedColor ?? this.activatedColor,
+        checkedColor: checkedColor ?? this.checkedColor,
+        cellColorInEditState: cellColorInEditState ?? this.cellColorInEditState,
+        cellColorInReadOnlyState:
+            cellColorInReadOnlyState ?? this.cellColorInReadOnlyState,
+        cellColorGroupedRow: cellColorGroupedRow == null
+            ? this.cellColorGroupedRow
+            : cellColorGroupedRow.value,
+        dragTargetColumnColor:
+            dragTargetColumnColor ?? this.dragTargetColumnColor,
+        iconColor: iconColor ?? this.iconColor,
+        disabledIconColor: disabledIconColor ?? this.disabledIconColor,
+        menuBackgroundColor: menuBackgroundColor ?? this.menuBackgroundColor,
+        gridBorderColor: gridBorderColor ?? this.gridBorderColor,
+        borderColor: borderColor ?? this.borderColor,
+        activatedBorderColor: activatedBorderColor ?? this.activatedBorderColor,
+        inactivatedBorderColor:
+            inactivatedBorderColor ?? this.inactivatedBorderColor,
+        iconSize: iconSize ?? this.iconSize,
+        rowHeight: rowHeight ?? this.rowHeight,
+        columnHeight: columnHeight ?? this.columnHeight,
+        columnFilterHeight: columnFilterHeight ?? this.columnFilterHeight,
+        defaultColumnTitlePadding:
+            defaultColumnTitlePadding ?? this.defaultColumnTitlePadding,
+        defaultColumnFilterPadding:
+            defaultColumnFilterPadding ?? this.defaultColumnFilterPadding,
+        defaultCellPadding: defaultCellPadding ?? this.defaultCellPadding,
+        columnTextStyle: columnTextStyle ?? this.columnTextStyle,
+        cellTextStyle: cellTextStyle ?? this.cellTextStyle,
+        columnContextIcon: columnContextIcon ?? this.columnContextIcon,
+        columnResizeIcon: columnResizeIcon ?? this.columnResizeIcon,
+        columnAscendingIcon: columnAscendingIcon == null
+            ? this.columnAscendingIcon
+            : columnAscendingIcon.value,
+        columnDescendingIcon: columnDescendingIcon == null
+            ? this.columnDescendingIcon
+            : columnDescendingIcon.value,
+        rowGroupExpandedIcon: rowGroupExpandedIcon ?? this.rowGroupExpandedIcon,
+        rowGroupCollapsedIcon:
+            rowGroupCollapsedIcon ?? this.rowGroupCollapsedIcon,
+        rowGroupEmptyIcon: rowGroupEmptyIcon ?? this.rowGroupEmptyIcon,
+        gridBorderRadius: gridBorderRadius ?? this.gridBorderRadius,
+        gridPopupBorderRadius:
+            gridPopupBorderRadius ?? this.gridPopupBorderRadius,
+        filterHeaderColor: filterHeaderColor ?? filterHeaderColor,
+        filterHeaderIconColor: filterHeaderIconColor ?? filterHeaderIconColor);
   }
 
   @override
diff --git a/lib/src/pluto_grid_popup.dart b/lib/src/pluto_grid_popup.dart
index 89b36db9b..2666e5687 100644
--- a/lib/src/pluto_grid_popup.dart
+++ b/lib/src/pluto_grid_popup.dart
@@ -102,6 +102,15 @@ class PlutoGridPopup {
     open();
   }
 
+  setColumnConfig() {
+    columns.map((element) {
+      if (configuration.style.filterHeaderColor != null) {
+        element.backgroundColor = configuration.style.filterHeaderColor!;
+      }
+    }).toList();
+    return columns;
+  }
+
   Future<void> open() async {
     final textDirection = Directionality.of(context);
 
@@ -126,7 +135,7 @@ class PlutoGridPopup {
                       child: Directionality(
                         textDirection: textDirection,
                         child: PlutoGrid(
-                          columns: columns,
+                          columns: setColumnConfig(),
                           rows: rows,
                           columnGroups: columnGroups,
                           onLoaded: onLoaded,
diff --git a/lib/src/ui/columns/pluto_column_filter.dart b/lib/src/ui/columns/pluto_column_filter.dart
index 28cb968a0..aaee97f32 100644
--- a/lib/src/ui/columns/pluto_column_filter.dart
+++ b/lib/src/ui/columns/pluto_column_filter.dart
@@ -254,27 +254,30 @@ class PlutoColumnFilterState extends PlutoStateWithChange<PlutoColumnFilter> {
         ),
         child: Padding(
           padding: _padding,
-          child: Center(
-            child: TextField(
-              focusNode: _focusNode,
-              controller: _controller,
-              enabled: _enabled,
-              style: style.cellTextStyle,
-              onTap: _handleOnTap,
-              onChanged: _handleOnChanged,
-              onEditingComplete: _handleOnEditingComplete,
-              decoration: InputDecoration(
-                hintText: _enabled ? widget.column.defaultFilter.title : '',
-                filled: true,
-                fillColor: _textFieldColor,
-                border: _border,
-                enabledBorder: _border,
-                disabledBorder: _disabledBorder,
-                focusedBorder: _enabledBorder,
-                contentPadding: const EdgeInsets.all(5),
+          child: widget.column.filterWidget ??
+              TextField(
+                focusNode: _focusNode,
+                controller: _controller,
+                enabled: _enabled,
+                style: style.cellTextStyle,
+                onTap: _handleOnTap,
+                onChanged: _handleOnChanged,
+                onEditingComplete: _handleOnEditingComplete,
+                decoration: InputDecoration(
+                  suffixIcon: widget.column.filterSuffixIcon,
+                  hintText: widget.column.filterHintText ??
+                      (_enabled ? widget.column.defaultFilter.title : ''),
+                  filled: true,
+                  hintStyle:
+                      TextStyle(color: widget.column.filterHintTextColor),
+                  fillColor: _textFieldColor,
+                  border: _border,
+                  enabledBorder: _border,
+                  disabledBorder: _disabledBorder,
+                  focusedBorder: _enabledBorder,
+                  contentPadding: const EdgeInsets.all(5),
+                ),
               ),
-            ),
-          ),
         ),
       ),
     );