Customize filter column

example/android/build.gradle

@@ -1,5 +1,5 @@
 buildscript {
- ext.kotlin_version = '1.3.50'
+ ext.kotlin_version = '1.6.10'
  repositories {
  google()
  mavenCentral()

lib/src/helper/filter_helper.dart

@@ -538,13 +538,15 @@ class PlutoGridFilterPopupHeader extends StatelessWidget {
  children: [
  IconButton(
  icon: const Icon(Icons.add),
- color: configuration!.style.iconColor,
+ color: configuration!.style.filterHeaderIconColor ??
+ configuration!.style.iconColor,
  iconSize: configuration!.style.iconSize,
  onPressed: handleAddButton,
  ),
  IconButton(
  icon: const Icon(Icons.remove),
- color: configuration!.style.iconColor,
+ color: configuration!.style.filterHeaderIconColor ??
+ configuration!.style.iconColor,
  iconSize: configuration!.style.iconSize,
  onPressed: handleRemoveButton,
  ),

lib/src/manager/state/column_state.dart

@@ -726,15 +726,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,

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? columnFilterHintText;
+
+ ///Set hint text color for filter field
+ Color? columnFilterHintTextColor;
+
+ ///Set suffix icon for filter field
+ Icon? columnFilterSuffixIcon;
+
+ ///Set custom widget
+ Widget? columnFilterWidget;
+
  /// 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.columnFilterHintText,
+ this.columnFilterHintTextColor,
+ this.columnFilterSuffixIcon,
+ this.columnFilterWidget,
  this.enableHideColumnMenuItem = true,
  this.enableSetColumnsMenuItem = true,
  this.enableAutoEditing = false,

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,
@@ -490,70 +499,74 @@ class PlutoGridStyleConfig {
  IconData? rowGroupEmptyIcon,
  BorderRadiusGeometry? gridBorderRadius,
  BorderRadiusGeometry? gridPopupBorderRadius,
+ Color? filterHeaderColor,
+ Color? filterHeaderIconColor,
  }) {
  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 ?? this.filterHeaderColor,
+ filterHeaderIconColor:
+ filterHeaderIconColor ?? this.filterHeaderIconColor);
  }
 
  @override

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,