Search Delegate

[mamm26]

Currently the ThemeProvider does not work in SearchDelegate, using the Dark theme the background is always white, and the custom font does not work either.

I've also tried to do:

  @override
  ThemeData appBarTheme(BuildContext context) {
      assert(context != null);
      final ThemeData theme = ThemeProvider.themeOf(context).data;
      assert(theme != null);

      return theme;
  }

However it doesn't work.

Regards.

[kdsuneraavinash]

Sorry for the late reply.

You can easily solve this by wrapping your entire app with ThemeProvider and giving the theme data from ThemeProvider into the MaterialApp. (Don't forget to use a builder method to obtain a new context or to move your material app to the new widget.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ThemeProvider(
      child: ThemeConsumer(
        child: Builder(
          builder: (themeContext) => MaterialApp(
            theme: ThemeProvider.themeOf(themeContext).data,
            title: 'Material App',
            home: MyApp(),
          ),
        ),
      ),
    );
  }

After this, the search delegate should work as expected. You will have to include the snippet you gave to style the app bar.

@override
ThemeData appBarTheme(BuildContext context) {
  assert(context != null);
  final ThemeData theme = ThemeProvider.themeOf(context).data;
  assert(theme != null);

  return theme;
}

[mamm26]

Hi,

I use onGenerateRoute and it doesn't work:

    @override
    Widget build(BuildContext context) {

        return ThemeProvider(
          defaultThemeId: "light_theme",
          themes: appThemes,
          saveThemesOnChange: true,
          loadThemeOnInit: true,
          child: MaterialApp(
              initialRoute: "home",
              onGenerateRoute: (settings) {
                  var routes = <String, WidgetBuilder> {
                      "home": (context) => Home(settings.arguments)
                  };

                  WidgetBuilder builder = routes[settings.name];
                  return MaterialPageRoute(builder: (context) => ThemeConsumer(child: builder(context)));
              },
              navigatorKey: navigatorKey
          ),
        );
    }

[kdsuneraavinash]

Wrap material app as a whole - not individual routes. It seems that Search Delegate gets theme data from the material app widget.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ThemeProvider(
      defaultThemeId: "light_theme",
      themes: appThemes,
      saveThemesOnChange: true,
      loadThemeOnInit: true,
      child: ThemeConsumer(
        child: Builder(
          builder: (themeContext) => MaterialApp(
            initialRoute: "home",
            theme: ThemeProvider.themeOf(themeContext).data,
            onGenerateRoute: (settings) {
              // onGenerateRoute
            },
            navigatorKey: navigatorKey,
          ),
        ),
      ),
    );
  }
}

[mamm26]

Fixed, thanks 😄

[msandwidi]

Hello guys. I customized the text fields but I would like a different styling for the text field of the search delegate. @kdsuneraavinash I used the solution above the change is not been applied to the text field. I don't want the borderline to be applied to the search field. I want it to be all without borders.

    //here is my theme
AppTheme(
      id: ThemeIDs.darkTheme,
      description: "Baobab Dark Theme",
      data: ThemeData.dark().copyWith(
       // brightness: Brightness.dark,
        accentColor: Colors.green,
        errorColor: Colors.amber[900],
        tabBarTheme: TabBarTheme(
          indicator: UnderlineTabIndicator(
            borderSide: BorderSide(
              color: Colors.green,
              style: BorderStyle.solid,
              width: 3.0,
            ),
          ),
        ),
       inputDecorationTheme: InputDecorationTheme(
          labelStyle: TextStyle(
            color: Colors.grey[400],
          ),
          filled: false,
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(
              color: Colors.grey[700],
              width: 1.0,
            ),
          ),
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(
              color: Colors.white,
              width: 1.0,
            ),
          ),
          disabledBorder: OutlineInputBorder(
            borderSide: BorderSide(
              color: Colors.grey[800],
              width: 1.0,
            ),
          ),
        ),
      ),
    );

    //here is the appBarTheme

  @override
  ThemeData appBarTheme(BuildContext context) {
    final theme = Theme.of(themeContext);

    return ThemeProvider.themeOf(themeContext).data.copyWith(
          // brightness: Brightness.dark,
          inputDecorationTheme: InputDecorationTheme(
            labelStyle: TextStyle(
              color: Colors.grey[400],
            ),
            filled: false,
            enabledBorder: InputBorder.none,
            focusedBorder: InputBorder.none,
            disabledBorder: InputBorder.none,
          ),
        );

  }

I wrapped Material app with ThemeConsumer like advised above

Thank you very much