仅当专注于颤动时如何在 TextFormField() 上显示计数器文本？

Question

I have the TextFormField() Widget, I want to display the CounterText but only when the field is focused

and one more side question How to change the field background color when on focus?

code:-

TextFormField(
  decoration: InputDecoration(
    labelText: "Weight",
    border: OutlineInputBorder(
    borderSide: BorderSide(
    color:Colors.grey[200],
    width: 1,
    style: BorderStyle.solid
  ),
  gapPadding: 4.0
 ),
  counterText:"Enter Your Weight",
),
),

Answer 1

I think the easiest way is to create a list of Boolean and update them on that so you know when the TextForm is selected and then display counterText

Column(
      children: <Widget>[
        SizedBox(height: 50),
        TextFormField(
          onTap: () {
            setState(() {
              selected[0] = true;
              selected[1] = false;
            });
          },
          controller: textController,
          decoration: InputDecoration(
            labelText: "Weight",
            border: OutlineInputBorder(
                borderSide: BorderSide(
                    color: Colors.grey[200],
                    width: 1,
                    style: BorderStyle.solid),
                gapPadding: 4.0),
            counterText: selected[0] ? "Enter Your Weight" : ' ',
          ),
        ),
        TextFormField(
          onTap: () {
            setState(() {
              selected[0] = false;
              selected[1] = true;
            });
          },
          decoration: InputDecoration(
            labelText: "Age",
            border: OutlineInputBorder(
                borderSide: BorderSide(
                    color: Colors.grey[200],
                    width: 1,
                    style: BorderStyle.solid),
                gapPadding: 4.0),
            counterText: selected[1] ? "Enter Your Age" : ' ',
          ),
        )
      ],
    )