Overriding appBarTheme in SearchDelegate

Viewed 93

I want to change the color of the appbar of the SearchDelegate. So I did the following

class DataSearch extends SearchDelegate<String> {
  var suggestionList = [];
  @override
  ThemeData appBarTheme(BuildContext context) {
    assert(context != null);
    final ThemeData theme = Theme.of(context);
    assert(theme != null);
    return ThemeData(
        primaryColor: createMaterialColor(Color(0xFF0E2848)));
  }

enter image description here

The problem with this is that the text in the status bar and the search text is black. I would like it to be white. So I attempted to change the brightness.

class DataSearch extends SearchDelegate<String> {
  var suggestionList = [];
  @override
  ThemeData appBarTheme(BuildContext context) {
    assert(context != null);
    final ThemeData theme = Theme.of(context);
    assert(theme != null);
    return ThemeData(
        primaryColor: createMaterialColor(Color(0xFF0E2848)),
        brightness: Brightness.dark);
  }

However the entire screen appears to be dark mode, with all the list tiles in dark mode too.

enter image description here

How do I just get the text and status bar to be white.

1 Answers

The following worked. Only set brightness to dark within the appBar (last line).

class DataSearch extends SearchDelegate<String> {
  var suggestionList = [];
  @override
  ThemeData appBarTheme(BuildContext context) {
    assert(context != null);
    final ThemeData theme = Theme.of(context);
    assert(theme != null);
    return ThemeData(
        primaryColor: Colors.blue,
        textTheme: TextTheme(headline6: TextStyle(color: Colors.white)),
        textSelectionTheme: TextSelectionThemeData(cursorColor: Colors.white),
        inputDecorationTheme: InputDecorationTheme(
            hintStyle: Theme.of(context)
                .textTheme
                .headline6
                .copyWith(color: Colors.white)),
        appBarTheme: AppBarTheme(brightness: Brightness.dark));
  }
}
Related