Flutter search unable to override certain theme styles - flutter

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

Answer 1

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!

Answer 2

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

Answer 3

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

Answer 4

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