(Flutter) TextFormField Change labelColor on Focus

Question

J'essaie de changer ma couleur de labelText lorsque je suis focalisé. Je peux changer la couleur du texte mais pas lorsqu'il est mis au point.

J'ai essayé toutes les couleurs de texte d'indication et les couleurs de texte d'étiquette, mais rien n'y fait.

Container(
  padding: EdgeInsets.fromLTRB(15, 10, 15, 0),
  child: TextFormField(
    cursorColor: Colors.lightGreen,
    keyboardType: TextInputType.phone,
    decoration: InputDecoration(
      labelText: 'Phone Number',
      hintText: 'Enter a Phone Number',
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(
          color: Colors.lightGreen
        )
      ),
      border: OutlineInputBorder(
        borderSide: BorderSide()
      ),
    )
  ),
),

Voici des images de ce qui se passe:

Answer 1

Résumé

Vous voudrez peut-être vérifier Flutter Cookbook Focus et champs de texte recette.

Essentiellement, nous devons:

1. Créez une propriété FocusNode.
2. Ajoutez-y l'initialisation et l'élimination.
3. Ajoutez-le au TextFormField.
4. Ajoutez une demande de focus à chaque pression sur le TextFormField.

1. Créez une propriété FocusNode

class CustomTextFormFieldState extends State<AuthTextFormField> {
  FocusNode _focusNode;
  ...

2. Ajoutez-y l'initialisation et la suppression

@override
void initState() {
  super.initState();
  _focusNode = FocusNode();
}

@override
void dispose() {
  _focusNode.dispose();
  super.dispose();
}

3. Ajoutez-le au TextFormField

@override
Widget build(BuildContext context) {
  return TextFormField(
    focusNode: _focusNode,
    ...

4. Ajoutez une demande de focus à chaque pression sur le TextFormField

N'oubliez pas d'utiliser setState:

void _requestFocus(){
  setState(() {
    FocusScope.of(context).requestFocus(_focusNode);
  });
}

Ajoutez la méthode à la propriété TextFormField de onTap:

@override
Widget build(BuildContext context) {
  return TextFormField(
    focusNode: _focusNode,
    onTap: _requestFocus,
    ...