Flutter - Loading/Progress Indicator inside TextFormField

user_6652282 0
Viewed 2480

I have a TextFormField like so:

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: (_) {},
      ),

This TextFormField will fetch an email from an api whenever onChanged() is called, so I decided I want to put a progress/loading indicator inside to indicate that it is fetching data, but I am having a hard time figuring out implementing it.

So is there a way I can insert a CircularProgressIndicator() or a simple progress/loading indicator inside a TextFormField?

Something like this:

TextFormField with Loading indicator

flutter
3 Answers

TextFormEdit doesn't have the right attribute, that is Suffix widget. Still, InputDecoration has the Suffix attribute where you can append whatever progress widget you want. Once here, you can keep it visible or not (and a bunch of other settings) directly in the widget.

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: (_) {},
      ),
user_59375080

Props to @stefanodecillis, I was also able to achieve it using 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(),
                ],
              ),
user_66522820

Before loading add this variable to class statefull widget

bool _isLoading = true;

so when your email loaded

setState(){
   _isLoading = false;
}

and for add this text field code

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: (_) {},
          ),
user_92808480
Related