Question

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

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

Answer 1

选择“选择”后，显示的颜色是主题的应用primaryColor:。

一种更改方式是使用Theme小部件。

 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 的更新，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,
  ),
),

Answer 3

将TextField包裹在Theme小部件周围，然后更改primaryColor。如果您将亮度设置为暗，则改为更改accentColor


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo App',
      theme: ThemeData(
        brightness: Brightness.light, // default value
      ),
      home: DemoPage(),
    );
  }
}

...

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        // override textfield's icon color when selected
        primaryColor: Colors.blue,
      ),
      child: TextField(
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.lock_outline),
          hintText: 'Username',
        ),
      ),
    );
  }


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo App',
      theme: ThemeData(
        brightness: Brightness.dark,
      ),
      home: DemoPage(),
    );
  }
}

...

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        // override textfield's icon color when selected
        accentColor: Colors.blue,
      ),
      child: TextField(
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.lock_outline),
          hintText: 'Username',
        ),
      ),
    );
  }

Answer 4

在 state 类中转换 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"),
          ),

Answer 5

我能够通过

实现这一目标

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

Answer 6

我能够通过在accentColor主题级别修改MaterialApp属性来实现此目的。

选定时Flutter TextField更改图标颜色

6 个答案: