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:
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: (_) {},
),
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(),
],
),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With