如何在焦點上更改TextField的textLable顏色

Question

我應該在代碼中添加什么來在焦點上實現TextField的textLable顏色為綠色。

 TextField(
  keyboardType: TextInputType.emailAddress,
  cursorColor: CustomColors.seaweed,
  keyboardAppearance: Brightness.light,
  autocorrect: false,
  style: TextStyle(
      color: Colors.black
  ),
  decoration: InputDecoration(
    fillColor: CustomColors.seaweed,
    hasFloatingPlaceholder: true,
    labelText: "Email",
    hintText: "Please enter email",
    focusedBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: CustomColors.seaweed)
    ),

  ),

)

Answer 1

創建一個FocusNode並FocusNode添加一個監聽器。 聚焦時，將標簽顏色更改為綠色。

class Foo extends StatefulWidget {
  @override
  createState() => _FooState();
}

class _FooState extends State<Foo> {
  final FocusNode focusNode = FocusNode();

  TextStyle labelStyle;

  @override
  void initState() {
    super.initState();
    focusNode.addListener(onFocusChange);
  }

  void onFocusChange() {
    setState(() {
      labelStyle = focusNode.hasFocus ? TextStyle(color: Colors.green) : null;
    });
  }

  @override
  void dispose() {
    focusNode.removeListener(onFocusChange);
    super.dispose();
  }

  ...

  TextField buildTextField() {
    return TextField(
      focusNode: focusNode,
      decoration: InputDecoration(
        labelStyle: labelStyle,
        ...
      ),
      ...
    );
  }
}