Code: I built a DataTable widget and I would like to change the header color of the table by the following:

headingRowColor: WidgetStateColor.resolveWith((states) {
                        if (states.contains(WidgetState.pressed)) {
                          return Colors.red;
                        } else if (states.contains(WidgetState.hovered)) {
                          return Colors.blue;
                        } else {
                          return Colors.white;
                        }
                      }),

Problem:
The problem with the code above is that the color always becomes Colors.white as shown in the picture below where my cursor is hovering above the heading row (shown by tooltip is where my cursor is).

The color stays with Colors.white when it should have been Colors.blue.

Observations:
I’ve also noticed that if I set Colors.white into Colors.white.withOpacity(0.5), when I hover the widget, the color correctly changes according to the states, but it becomes transparent which I do not want.

Question:
How do I change the header color of DataTable then?