單擊字段時更改 flutter 中文本表單字段的前綴圖標顏色

Question

我在 flutter 應用程序中有一個名稱表單字段。 其中有一個前綴圖標。 當我單擊表單字段時，圖標的顏色變為藍色，而我想將其變為綠色。 我該怎么做，有人可以指導我嗎？ 這是它的代碼：

 TextFormField(
      decoration: InputDecoration(
        focusedBorder: OutlineInputBorder(
          borderSide: const BorderSide(color: Colors.green, width: 2.0),
          borderRadius: BorderRadius.circular(10.0),
        ),
        prefixIcon: const Icon(Icons.person),
       
        hintText: "Name",
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
      ),
    );

Answer 1

使用Theme ，因為這可能由您的應用程序原色控制：使用Theme()小部件包裝

Theme(
   data: Theme.of(context).copyWith(
   primaryColor: Color()
    ), 
   child: TextField())

Answer 2

Flutter 對 go 的方式是使用 resolveWith。 您可以檢查當前的 state 以檢查文本字段是否聚焦、顯示錯誤等。並根據您設置的顏色。

從文檔（ https://api.flutter.dev/flutter/material/InputDecoration-class.html ）：

final ThemeData themeData = Theme.of(context);
    return Theme(
      data: themeData.copyWith(
          inputDecorationTheme: themeData.inputDecorationTheme.copyWith(
        prefixIconColor:
            MaterialStateColor.resolveWith((Set<MaterialState> states) {
          if (states.contains(MaterialState.focused)) {
            return Colors.green;
          }
          if (states.contains(MaterialState.error)) {
            return Colors.red;
          }
          return Colors.grey;
        }),
      )),
      child: TextFormField(
        initialValue: 'abc',
        decoration: const InputDecoration(
          prefixIcon: Icon(Icons.person),
        ),
      ),
    );