How to change textField header color?

Question

How to change "Name" form TextField to Purple when Focus on this i have a problem here that i try to solve this but it's not work

here is my code

class NewName extends StatefulWidget {
  @override
  _NewNomeState createState() => _NewNomeState();
}

class _NewNomeState extends State<NewName> {
  @override
  Widget build(BuildContext context) {
    FocusNode myFocusNode = new FocusNode();
    return Padding(
      padding: const EdgeInsets.only(top: 0, left: 50, right: 50),
      child: Container(
        height: 60,
        width: MediaQuery.of(context).size.width,
        child: TextField(
          focusNode: myFocusNode,
          style: TextStyle(
            color: Colors.purple,
          ),
          decoration: InputDecoration(
            enabledBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.black),
            ),
            focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.purple),
            ),
            border: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.purple),
            ),
            labelText: 'Name',
            labelStyle: TextStyle(
                fontFamily: 'SukumvitSetSemiBold',
                fontSize: 14,
                color: myFocusNode.hasFocus ? Colors.purple : Colors.black),
          ),
        ),
      ),
    );
  }

}

i have seen some Question that similar but i still don't know how to fixed it. i'm too confuse here please help #Thank you very much

Answer 1

Well first you should declare your focusNode outside the build function, try moving FocusNode myFocusNode = new FocusNode(); outside of Build(BuildContext context) and check if that solved it.