Flutter 搜索无法覆盖某些主题样式

Question

我正在尝试使用自定义 SearchDelegate 自定义搜索的外观，但似乎覆盖 appBarTheme 只会更新某些主题样式。我可以更改应用栏的颜色和文本样式，但我似乎忽略了其他设置，例如高度和装饰。

如何自定义搜索委托输入装饰和应用栏高度？

我错过了什么吗？这是预期的行为吗？

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

我设法通过添加appBarTheme: AppBarTheme(elevation: 0.0, color: Colors.black12) 使海拔为零。我无法让输入装饰以相同的方式工作，我确实在应用主题代码的根目录中添加了该行，但它似乎不起作用。

代码Root主题代码如下：

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

SearchDelegate里面的Theme如下：

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

希望这会有所帮助！

Answer 2

我找到了解决办法！！！

1. 移除建筑小部件

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

1. 您需要覆盖 buildActions 以放置自定义输入

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

1. 第一个展开的小部件是“返回按钮”
2. 第二个扩展的小部件是“TextFormField”，然后你可以覆盖装饰：InputDecoration....
3. 第三个扩展小部件正在清除文本表单字段输入

Answer 3

修改了 adhithya Shetty 的答案。 这适用于那些想要随光标颜色一起更改提示颜色的人

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

这对我有用。

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