Search code examples
flutterflutter-datatable

How do I change the color of the sorting icon in a DataTable?


Widget DataTable has an built-in icon for sorting indication

enter image description here

How can I change the color or even the icon?

                Scrollbar(
                  controller: _scrollController,
                  child: SingleChildScrollView(
                    controller: _scrollController,
                    scrollDirection: Axis.horizontal,
                      child: DataTable(
                      border: TableBorder.all(width: 0.2),
                      headingRowColor: MaterialStateProperty.resolveWith<Color?>(
                          (Set<MaterialState> states) {
                        return Styles.TableHeaderColor;
                      }),
                      columns: getColumns(TableTitles),
                      rows: getRows(),
                      sortColumnIndex: sortColumnIndex,
                      sortAscending: isAscending,
                      dataRowHeight: 50,
                      headingRowHeight: 40,
                    ),
                  ),
                ),


Solution

  • The icon use the IconThemeData, so either change that for the entire app, or for the specific widget. I.e. you can wrap your DataTable in a Theme widget, something like this:

    final theme = Theme.of(context);
    ...
    Theme(
     data: theme.copyWith(iconTheme: theme.iconTheme.copyWith(color: Colors.red)),
      child: DataTable(...)
    ),