Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter - Loading/Progress Indicator inside TextFormField

Tags:

flutter

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

like image 915
Zolicious Avatar asked Jun 20 '20 12:06

Zolicious


2 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: (_) {},
      ),
like image 58
stefanodecillis Avatar answered Oct 17 '22 21:10

stefanodecillis


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(),
                ],
              ),
like image 3
Zolicious Avatar answered Oct 17 '22 22:10

Zolicious