diff --git a/example/android/build.gradle b/example/android/build.gradle index 24047dce5..4256f9173 100644 --- a/example/android/build.gradle +++ b/example/android/build.gradle @@ -1,5 +1,5 @@ buildscript { - ext.kotlin_version = '1.3.50' + ext.kotlin_version = '1.6.10' repositories { google() mavenCentral() diff --git a/lib/src/helper/filter_helper.dart b/lib/src/helper/filter_helper.dart index 9a47632ba..97be965a5 100644 --- a/lib/src/helper/filter_helper.dart +++ b/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, ), diff --git a/lib/src/manager/state/column_state.dart b/lib/src/manager/state/column_state.dart index 77109320d..3e62b2d1f 100644 --- a/lib/src/manager/state/column_state.dart +++ b/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, diff --git a/lib/src/model/pluto_column.dart b/lib/src/model/pluto_column.dart index 4945d6632..dca61d3c8 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? 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, diff --git a/lib/src/pluto_grid_configuration.dart b/lib/src/pluto_grid_configuration.dart index 9657446c9..e19dc8f60 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, @@ -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 diff --git a/lib/src/pluto_grid_popup.dart b/lib/src/pluto_grid_popup.dart index 710e2c350..049ad1b61 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 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 da1749122..84b26b689 100644 --- a/lib/src/ui/columns/pluto_column_filter.dart +++ b/lib/src/ui/columns/pluto_column_filter.dart @@ -255,25 +255,30 @@ class PlutoColumnFilterState extends PlutoStateWithChange { 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.columnFilterWidget ?? + TextField( + focusNode: _focusNode, + controller: _controller, + enabled: _enabled, + style: style.cellTextStyle, + onTap: _handleOnTap, + onChanged: _handleOnChanged, + onEditingComplete: _handleOnEditingComplete, + decoration: InputDecoration( + suffixIcon: widget.column.columnFilterSuffixIcon, + hintText: widget.column.columnFilterHintText ?? + (_enabled ? widget.column.defaultFilter.title : ''), + filled: true, + hintStyle: TextStyle( + color: widget.column.columnFilterHintTextColor), + fillColor: _textFieldColor, + border: _border, + enabledBorder: _border, + disabledBorder: _disabledBorder, + focusedBorder: _enabledBorder, + contentPadding: const EdgeInsets.all(5), + ), + ), ), ), ),