Flutter - Индикатор загрузки / выполнения внутри TextFormField

Question

У меня есть TextFormField, например:

TextFormField(
        cursorColor: Colors.black,
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.email),
          errorMaxLines: 2,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          errorBorder: OutlineInputBorder(
            borderSide: BorderSide(
              width: 2,
            ),
          ),
        ),
        autocorrect: false,
        onChanged: (_) {},
        validator: (_) {},
      ),

Этот TextFormField будет получать электронное письмо из api всякий раз, когда вызывается onChanged () , поэтому я решил, что хочу поставить прогресс / loading внутри, чтобы указать, что он получает данные, но мне трудно понять, как это реализовать.

Так есть ли способ вставить CircularProgressIndicator () или простой индикатор прогресса / загрузки внутри TextFormField?

Примерно так:

TextFormField с индикатором загрузки

Answer 1

TextFormEdit не имеет нужного атрибута, то есть виджета Suffix. Тем не менее, InputDecoration имеет атрибут Suffix , куда вы можете добавить любой виджет прогресса, который хотите. Оказавшись здесь, вы можете оставить его видимым или нет (и множество других настроек) прямо в виджете.

TextFormField(
        cursorColor: Colors.black,
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.email),
          suffix: isLoading?CircularProgressIndicator():null
          errorMaxLines: 2,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          errorBorder: OutlineInputBorder(
            borderSide: BorderSide(
              width: 2,
            ),
          ),
        ),
        autocorrect: false,
        onChanged: (_) {},
        validator: (_) {},
      ),

Answer 2

Поддерживает @ stefanodecillis , я также смог добиться этого с помощью Stack

              Stack(
                children: <Widget>[
                  TextFormField(
                    cursorColor: Colors.black,
                    decoration: InputDecoration(
                      prefixIcon: Icon(Icons.email),
                      errorMaxLines: 2,
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10),
                      ),
                      errorBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                          width: 2,
                        ),
                      ),
                    ),
                    autocorrect: false,
                    onChanged: (_) {},
                    validator: (_) {},
                  ),
                  (state.isSubmitting)
                      ? Positioned(
                          top: 5,
                          right: 5,
                          child: Container(
                            child: CircularProgressIndicator(),
                          ),
                        )
                      : Container(),
                ],
              ),

Answer 3

Перед загрузкой добавьте эту переменную в виджет с полным состоянием класса

bool _isLoading = true; 

, чтобы при загрузке электронной почты

setState(){
   _isLoading = false;
}

и для добавления этого кода текстового поля

TextFormField(
            cursorColor: Colors.black,
            decoration: InputDecoration(
            prefixIcon: Icon(Icons.email),
            suffix: isLoading?CircularProgressIndicator():null,
              errorMaxLines: 2,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
              ),
              errorBorder: OutlineInputBorder(
                borderSide: BorderSide(
                  width: 2,
                ),
              ),
            ),
            autocorrect: false,
            onChanged: (_) {},
            validator: (_) {},
          ),