Flutter TextField 选择时更改图标颜色答案

【问题标题】：Flutter TextField change Icon color when selectedFlutter TextField 选择时更改图标颜色
【发布时间】：2019-07-15 02:41:49
【问题描述】：

目标：点击TextField时，更改TextField旁边prefixIcon的颜色。

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.lock_outline),
    hintText: 'Username'
  )
)

【问题讨论】：

您应该发布您正在使用的代码段。

标签： flutter dart

【解决方案1】：

选中时，显示的颜色是应用程序primaryColor: 的主题。

一种改变方式是使用Theme Widget。

 Theme(
                              child: TextField(
                                decoration: InputDecoration(
                                  prefixIcon: Icon(Icons.email),
                                  labelText: "Email",
                                  hintText: "example@mail.com",
                                ),
                                autofocus: true,
                              ),
                              data: Theme.of(context)
                                  .copyWith(primaryColor: Colors.redAccent,),
                            ),

其他是在MaterialApp主题级别更改primaryColor。

【讨论】：

它对我有用，但我用accentColor:而不是primaryColor:，似乎他们改变了源颜色

【解决方案2】：

我可以通过在 MaterialApp 主题级别修改 accentColor 属性来完成此操作。

【讨论】：

【解决方案3】：

在Flutter 2.5中，可以在ColorScheme.primary中设置图标的活动颜色：

theme: ThemeData().copyWith(
  colorScheme: ThemeData().colorScheme.copyWith(
    primary: Colors.green,
  ),
),

Live Demo

【讨论】：

唯一对我有用的东西。谢谢;

【解决方案4】：

根据 Flutter 的更新，accentColor 属性已被弃用。

https://flutter.dev/docs/release/breaking-changes/theme-data-accent-properties

旧：

theme: ThemeData(
  accentColor: Colors.blue,
),

新：

theme: ThemeData(
  colorScheme: ThemeData().colorScheme.copyWith(
    secondary: Colors.blue,
  ),
),

【讨论】：

@SalahAdDin 也许你没有更新到最新版本的flutter。
在上一个版本中，禁用的颜色基于OnSurface 颜色，这是一个不同的颜色。

【解决方案5】：

在状态类中转换 StatefulWidget 创建 FocusNodes 并使用 TextFormField

 List<FocusNode> _focusNodes = [
  FocusNode(),
  FocusNode(),
];

  @override
  void initState() {
    _focusNodes.forEach((node){
    node.addListener(() {
      setState(() {});
    });
  });
    super.initState();
  }


TextFormField(
            focusNode: _focusNodes[0],
            decoration: InputDecoration(
                prefixIcon: Icon(
                  Icons.alternate_email,
                  color: _focusNodes[0].hasFocus ? Colors.green : Colors.grey,
                ),
                hintText: "Email"),
          ),

【讨论】：

确保订阅焦点更改并在那里调用 setSate 以正确反映状态。也不要忘记取消订阅和处理...stackoverflow.com/a/49344456/6543507
非常感谢，它解决了我的问题

【解决方案6】：

我能够做到这一点

ThemeData(
   colorScheme: ThemeData().colorScheme.copyWith(
              primary:Colors.red,
  ),
),

在 MaterialApp 中或在 TextFormField 上添加主题

Theme(
    data:Theme.of(context).copyWith(
        colorScheme: ThemeData().colorScheme.copyWith(
              primary:Colors.red,
        ),
       ),
    child:TextFormField()
)

【讨论】：