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()),
    );
  }
}

Solution

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!