Skip to content

Commit

Permalink
Customize filter column by @RamshaFarheen bosskmk#739
Browse files Browse the repository at this point in the history
  • Loading branch information
@doonfrs
doonfrs committed Dec 7, 2023
1 parent 84bd66f commit 36207fd
Show file tree
Hide file tree
Showing 5 changed files with 185 additions and 147 deletions.
18 changes: 9 additions & 9 deletions lib/src/manager/state/column_state.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
16 changes: 16 additions & 0 deletions lib/src/model/pluto_column.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down
244 changes: 127 additions & 117 deletions lib/src/pluto_grid_configuration.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down
11 changes: 10 additions & 1 deletion lib/src/pluto_grid_popup.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -126,7 +135,7 @@ class PlutoGridPopup {
child: Directionality(
textDirection: textDirection,
child: PlutoGrid(
columns: columns,
columns: setColumnConfig(),
rows: rows,
columnGroups: columnGroups,
onLoaded: onLoaded,
Expand Down
43 changes: 23 additions & 20 deletions lib/src/ui/columns/pluto_column_filter.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
),
),
),
),
),
),
);
Expand Down

0 comments on commit 36207fd

Please sign in to comment.