Как отобразить текст счетчика в TextFormField () только в том случае, если он сфокусирован на флаттере?

Question

У меня есть виджет TextFormField(), я хочу отобразить CounterText, но только когда поле сфокусировано

и еще один побочный вопрос Как изменить цвет фона поля при фокусировке?

код: -

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

Я думаю, что самый простой способ - создать список Boolean и обновить его так, чтобы вы знали, когда выбрана TextForm, а затем отображать 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" : ' ',
          ),
        )
      ],
    )