Flutter TextField 在选中时更改图标颜色

Question

目标：在单击 TextField 时更改 TextField 旁边的 prefixIcon 的颜色。

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

Answer 1

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

一种改变方式是使用ThemeWidget。

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

另一个是primaryColor在MaterialApp主题级别进行更改。

Answer 2

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

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

现场演示

Answer 3

如果您不想仅针对字段的 1 种行为更改整个应用程序主题，您可以使用 dart 中的 MaterialStateColor 类并根据状态切换颜色。

这是一个例子

InputDecoration(
        prefixIcon: widget.icon,
        prefixIconColor: MaterialStateColor.resolveWith((states) =>
            states.contains(MaterialState.focused)
                ? Colors.black
                : Colors.grey)
  ),

Answer 4

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

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

老的：

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

新的：

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