Flutter - 如何更改搜索委托 class 中的文本颜色？

Question

我设法改变了hintStyle

@override
ThemeData appBarTheme(BuildContext context) {
  return ThemeData(
    primaryColor: kPrimaryColor,
    primaryIconTheme: IconThemeData(
      color: Colors.white,
    ),
    inputDecorationTheme: InputDecorationTheme(
      hintStyle:
        Theme.of(context).textTheme.title.copyWith(color: Colors.white),
    ),
  );
}

但是，如果我在 appbar 搜索字段中输入一些内容，颜色仍然是黑色...

如何正确更改SearchDelegate textcolor中的文本颜色？

Answer 1

使用 SearchDelegate 您可以自定义搜索的文本提示值和颜色以及查询的颜色和大小。 为达到这个：

搜索的文本提示值和颜色 --> 可以覆盖searchFieldLabel和searchFieldStyle ，第一个是 String，后者是 TextStyle：

@override
String get searchFieldLabel => 'Your Custom Hint Text...';

@override
TextStyle get searchFieldStyle => TextStyle(
    color: Colors.white,
    fontSize: 18.0,
  );

查询的文本颜色和大小 --> 您需要覆盖委托的appBarTheme方法并更改您需要的内容。 要更改查询的文本颜色，请设置header6的textTheme ：

@override
ThemeData appBarTheme(BuildContext context) {
assert(context != null);
final ThemeData theme = Theme.of(context).copyWith(
  textTheme: TextTheme(
    headline6: TextStyle(
      color: Colors.white,
      fontSize: 18.0,
    ),
  ),
);
assert(theme != null);
return theme;
}

Answer 2

在您的应用ThemeData中更改headline6文本样式：

MaterialApp(
      theme: ThemeData(
      textTheme: TextTheme(
          headline6: TextStyle(color: 'Your Prefered Color'))
      ),
      home: Home()
    );

Answer 3

参考问题评论中的讨论， appBarTheme的textTheme属性允许更改颜色。 示例代码信用@Matthias

代码：

textTheme: TextTheme(title: TextStyle( color: Colors.white, fontSize: 18,),),

Answer 4

所有这些关于 textTheme 属性的答案都会影响搜索页面其他部分的 Text 小部件。 所以你最终会在浅色主题中得到一些透明的文本，因为文本颜色已经与背景混合。

所以这是一个不完整的解决方案

Answer 5

这就是我主题搜索委托的方式：

  @override
  ThemeData appBarTheme(BuildContext context) {
    return Theme.of(context).copyWith(
      inputDecorationTheme: searchFieldDecorationTheme,
      textTheme: Theme.of(context).textTheme.copyWith(
        headline6: TextStyle(color: Colors.white),
      ),
    );
  }

我复制全局 textTheme styles，并仅覆盖特定标题。 对于更多搜索样式（如提示颜色、搜索输入大小、输入下划线等），使用inputDecorationTheme 。

Answer 6

我添加了hintColor:Colors.white线，它对我有用。

@override
ThemeData appBarTheme(BuildContext context) {
final ThemeData theme = Theme.of(context);
return theme.copyWith(
  primaryColor: Colors.blue,
  primaryIconTheme: theme.primaryIconTheme.copyWith(color: Colors.white),
  hintColor: Colors.white,
  
  textTheme: TextTheme(
    headline6: TextStyle(color: Colors.white,
    fontSize: 18)
    
  )
);