How to Apply a Custom Filter Icon in Flutter DataTable?

In this article, we will show you how to customize the filter icon in Flutter DataTable.

Initialize the SfDataGrid widget with all the required properties. The onFilterChanged callback is triggered when a column filter is applied via the UI, providing the column name along with filter details such as type and value. By using a flag map to track each column’s filter state, you can enable validation and customize the filter icon display based on the filtering status.

// Stores the filter state for each column by its name
Map<String, bool> filterStates = {};

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')),
      body: SfDataGridTheme(
        data: SfDataGridThemeData(
          filterIcon: Builder(
            builder: (context) {
              Widget? icon;
              String columnName = '';
              context.visitAncestorElements((element) {
                if (element is GridHeaderCellElement) {
                  columnName = element.column.columnName;
                }
                return true;
              });
              // Checks if a filter is applied to the selected column
              bool column = filterStates[columnName] ?? false;
              if (column) {
                icon = const Icon(
                  Icons.filter_alt_outlined,
                  size: 20,
                  color: Colors.purple,
                );
              }
              return icon ??
                  const Icon(
                    Icons.filter_alt_off_outlined,
                    size: 20,
                    color: Colors.deepOrange,
                  );
            },
          ),
        ),
        child: SfDataGrid(
          source: employeeDataSource,
          columnWidthMode: ColumnWidthMode.fill,
          allowFiltering: true,
          onFilterChanged: (details) {
            final columnName = details.column.columnName;
            final isFilterActive = details.filterConditions.isNotEmpty;
            // Updates _filterStates using the details from the onFilterChanged callback
            setState(() {
              filterStates[columnName] = isFilterActive;
            });
          },
          columns: <GridColumn>[
            GridColumn(
              columnName: 'id',
              label: Container(
                padding: EdgeInsets.all(16.0),
                alignment: Alignment.center,
                child: Text('ID'),
              ),
            ),
            GridColumn(
              columnName: 'name',
              label: Container(
                padding: EdgeInsets.all(8.0),
                alignment: Alignment.center,
                child: Text('Name'),
              ),
            ),
            GridColumn(
              columnName: 'designation',
              label: Container(
                padding: EdgeInsets.all(8.0),
                alignment: Alignment.center,
                child: Text('Designation', overflow: TextOverflow.ellipsis),
              ),
            ),
            GridColumn(
              columnName: 'salary',
              label: Container(
                padding: EdgeInsets.all(8.0),
                alignment: Alignment.center,
                child: Text('Salary'),
              ),
            ),
          ],
        ),
      ),
    );
  }

You can download this example in GitHub.

Conclusion
I hope you enjoyed learning about how to apply a custom filter icon in Flutter DataTable .

You can refer to our Flutter DataTable feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flutter DataTable example to understand how to create and manipulate data.
​
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
​
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!