Flutter search unable to override certain theme styles

Question

I am trying to customized the appearance of search using a custom SearchDelegate, but it appears that overriding appBarTheme only updates certain theme styles. I am able to change the color of the app bar and text style, but I appears to ignore other settings, like elevation and decoration.

How do I customize the search delegate input decoration and app bar elevation?

Am I missing something? Is this intended behavior?

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title',
      home: Scaffold(
        appBar: AppBar(
          actions: [
            Builder(
              builder: (context) => IconButton(
                icon: Icon(Icons.search),
                onPressed: () => showSearch(context: context, delegate: CustomSearchDelegate()),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class CustomSearchDelegate extends SearchDelegate {
  @override
  List<Widget> buildActions(BuildContext context) => [
        if (query.isNotEmpty)
          IconButton(
            icon: Icon(Icons.close),
            onPressed: () {
              query = "";
              showSuggestions(context);
            },
          )
      ];

  @override
  Widget buildLeading(BuildContext context) => IconButton(
        tooltip: 'Back',
        icon: AnimatedIcon(icon: AnimatedIcons.menu_arrow, progress: transitionAnimation),
        onPressed: () => close(context, null),
      );

  @override
  Widget buildSuggestions(BuildContext context) => Text("Suggestions go here");

  @override
  Widget buildResults(BuildContext context) => Text("Results go here");

  @override
  ThemeData appBarTheme(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    return theme.copyWith(
      primaryColor: Colors.white,
      primaryIconTheme: theme.primaryIconTheme.copyWith(color: Colors.green),
      primaryColorBrightness: Brightness.dark,
      textTheme: theme.textTheme.copyWith(
        title: TextStyle(fontWeight: FontWeight.normal),
      ),
      // these ↓ do not work ☹️
      appBarTheme: theme.appBarTheme.copyWith(color: Colors.black12, elevation: 0),
      inputDecorationTheme: theme.inputDecorationTheme.copyWith(border: UnderlineInputBorder()),
    );
  }
}

try appBarTheme: AppBarTheme(elevation: 4) for appbar elevation — Amit Prajapati, Oct 11 '19 at 17:41
Is possible to show some more code related to that search and appbar ? — Amit Prajapati, Oct 14 '19 at 14:02
I updated code snippet to include an executable example app. @AmitPrajapati — Your Friend Ken, Oct 14 '19 at 15:03
It appears some styles are hardcoded in the flutter source code https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/search.dart#L503-L525 — Your Friend Ken, Oct 14 '19 at 16:54

score 3 · Answer 1 · answered Mar 14 '20 at 05:11

I managed to get the elevation to zero by adding appBarTheme: AppBarTheme(elevation: 0.0, color: Colors.black12). I could not get the input decoration to work in the same way, I did add the line in the root of the app theme code but it didn't seem to work.

The code Root theme code is as follows:

  class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          backgroundColor: Colors.white,
          appBarTheme: AppBarTheme(elevation: 0.0, color: Colors.black12),//elevation did work
          inputDecorationTheme:
              InputDecorationTheme(border: UnderlineInputBorder()),//this did not imply
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

and the Theme inside SearchDelegate is as follows:

@override
  ThemeData appBarTheme(BuildContext context) {
    assert(context != null);
    final ThemeData theme = Theme.of(context);
    assert(theme != null);
    return theme.copyWith(
      primaryColor: Colors.white,
      primaryIconTheme: theme.primaryIconTheme.copyWith(color: Colors.green),
      primaryColorBrightness: Brightness.dark,
      textTheme: theme.textTheme.copyWith(
        title: TextStyle(fontWeight: FontWeight.normal),
      ),
    );
  }

Hope this helps!

Ershat · Answer 2 · 2021-08-11T06:49:58.420

this is worked to me.

enter image description here

@override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
        icon: AnimatedIcon(icon: AnimatedIcons.menu_close, progress: transitionAnimation),
        onPressed: () {
          if (query.isEmpty) {
            close(context, null);
          } else {
            query = "";
            // showSuggestions(context);
          }
        },
      ),
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
      icon: AnimatedIcon(icon: AnimatedIcons.menu_arrow, progress: transitionAnimation),
      onPressed: () => close(context, null),
    );
  }

  @override
  ThemeData appBarTheme(BuildContext context) {
    final ThemeData theme = Theme.of(this.context);
    return theme.copyWith(
      accentColor: Colors.red,
      textTheme: theme.textTheme.copyWith(
        headline6: theme.textTheme.subtitle1.copyWith(color: Colors.black),
      ),
      inputDecorationTheme: theme.inputDecorationTheme.copyWith(
        hintStyle: theme.textTheme.subtitle1.copyWith(color: Colors.grey),
        fillColor: Colors.grey[200],
        filled: true,
        isDense: true,
        contentPadding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(5),
          borderSide: BorderSide(color: Colors.grey, width: 0),
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(5),
          borderSide: BorderSide(color: Colors.grey, width: 0),
        ),
      ),
      appBarTheme: theme.appBarTheme.copyWith(
        titleSpacing: 0,
      ),
    );
  }

score 0 · Answer 3 · answered Apr 18 '21 at 18:37

Modified adhithya Shetty's answer . This is for those who wants to change hint color along with cursor color

Color primaryColor = Color(0xff673BB7);  // My Custom Color 

 @override
   ThemeData appBarTheme(BuildContext context) {
     assert(context != null);
     final ThemeData theme = Theme.of(context);
     assert(theme != null);
     return theme.copyWith(
       appBarTheme: theme.appBarTheme.copyWith(backgroundColor: primaryColor),  // appbar background color 
       primaryColor: primaryColor,
       textSelectionTheme: TextSelectionThemeData(
         cursorColor: Colors.white ),  // cursor color
       hintColor: Colors.white,       //hint text color 
       primaryIconTheme: theme.primaryIconTheme.copyWith(color: Colors.white), //icons color
       primaryColorBrightness: Brightness.dark,
       textTheme: theme.textTheme.copyWith(
         headline6: TextStyle(fontWeight: FontWeight.normal,color: Colors.white),  // query Color 
       ),
     );
   }

score -1 · Answer 4 · answered Nov 23 '20 at 10:17

I have found the solution !!!

Remove building Widget

  Widget buildLeading(BuildContext context) { 
// TODO: implement buildLeading 
       return Container( 
      height: 0,  
        );  
      }

You need to override buildActions to put custom Input

  List<Widget> buildActions(BuildContext context) {
    // TODO: implement buildActions
    return [
      Expanded(flex: 1),
      Expanded(flex: 7),
      Expanded(flex: 2),
    ];
  }

First Expanded Widget is "Back button"
Second Expanded Widget is "TextFormField", then you can override decoration: InputDecoration....
Third Expanded Widget is clearing textformfield input

Flutter search unable to override certain theme styles

4 Answers4