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(),
],
),
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: (_) {},
),
Related
I am trying resize DropdownButtonFormField with SizedBox. The Hinttext is shown correctly, but when I choose on of the options I get a half of text.
Also I have the Column with TextFields and SizedBox (for separating them) and I want have
What I have
What I want but with correct Text not only hint
return SizedBox(height: 42.5, child: DropdownButtonFormField(
value: _selectedVal,
items: _items
.map((x) => DropdownMenuItem(
value: x,
child: Text(x),
))
.toList(),
onChanged: (val) {
setState(() {
_selectedVal = val as String;
});
},
decoration: const InputDecoration(
filled: true,
fillColor: Colors.white,
hintText: 'hintText',
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(10))),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
),
));
try add contentPadding EdgeInsets.zero inside InputDecoration
return SizedBox(height: 42.5, child: DropdownButtonFormField(
value: _selectedVal,
items: _items
.map((x) => DropdownMenuItem(
value: x,
child: Text(x),
))
.toList(),
onChanged: (val) {
setState(() {
_selectedVal = val as String;
});
},
decoration: const InputDecoration(
contentPadding: EdgeInsets.zero <====== Here
filled: true,
fillColor: Colors.white,
hintText: 'hintText',
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(10))),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
),
));
I have wrapped a container and a sizedbox around the textform field to fit the error message in the container but its keeps resizing the widget.
Container(
decoration: BoxDecoration(
color: Color(0xffFAFAFA),
borderRadius: BorderRadius.circular(10.0),
),
height: 73,
width: 396,
child: Center(
child: TextFormField(
keyboardType: TextInputType.number,
onSaved: (Value) => print(phonenumber),
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(10.0, 50.0, 0.0, 00.0),
isDense: true,
hintStyle: TextStyle(
fontFamily: "Proxima Nova",
fontWeight: FontWeight.w300,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(
//color: Colors.amber,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(width: 1, color: Colors.transparent),
),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.transparent),
),
// labelText: '',
),
inputFormatters: [
FilteringTextInputFormatter.deny(
RegExp(
r'^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{5})(?: *x(\d+))?\s*$'),
)
],
controller: phonenumber,
validator: (value) {
if (value != null && value.isEmpty) {
return 'Kindly register with another number or Log In';
} else
return null;
},
),
),
),
i wrapped a container around the textformfield and a sizedbox around the textformfield but,the error message keeps resizing the container.
Please remove container height , this is causing shrink.
how do i reduce the top and bottom padding of flutter textfield within the border? there is too much space for top and bottom.
TextField(
textInputAction: TextInputAction.search,
controller: controller,
focusNode: focusNode,
autofocus: true,
cursorColor: Theme.of(context).primaryColor,
onChanged: (text) {
text.length >= 4
? provider.fetchSearchName(text)
: buildNoData();
},
decoration: InputDecoration(
suffixIcon: IconButton(
onPressed: clearText,
color: Theme.of(context).primaryColor,
icon: Icon(Icons.cancel_outlined)
),
labelText: 'Search',
labelStyle: TextStyle(color: Colors.white),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(width: 2, color: Theme.of(context).primaryColor),
// borderRadius: BorderRadius.circular(10),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(width: 2, color: Theme.of(context).primaryColor),
// borderRadius: BorderRadius.circular(10),
)
),
),
You may use contentPadding: within InputDecoration widget.
Here's the Code
TextField(
textInputAction: TextInputAction.search,
controller: controller,
focusNode: focusNode,
autofocus: true,
cursorColor: Theme.of(context).primaryColor,
onChanged: (text) {
text.length >= 4
? provider.fetchSearchName(text)
: buildNoData();
},
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 5, horizontal: 12),
suffixIcon: IconButton(
onPressed: clearText,
color: Theme.of(context).primaryColor,
icon: Icon(Icons.cancel_outlined)
),
labelText: 'Search',
labelStyle: TextStyle(color: Colors.white),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(width: 2, color: Theme.of(context).primaryColor),
// borderRadius: BorderRadius.circular(10),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(width: 2, color: Theme.of(context).primaryColor),
// borderRadius: BorderRadius.circular(10),
)
),
),
how do i make the textfield shorter and not goes behind the clear button?
Stack(
alignment: AlignmentDirectional.centerEnd,
children: [
TextField(
textInputAction: TextInputAction.search,
controller: controller,
focusNode: focusNode,
autofocus: true,
onChanged: (text) {
text.length >= 4
? provider.fetchBySearchName(text)
: buildNoData();
},
decoration: InputDecoration(
labelText: 'Search',
labelStyle: TextStyle(color: Colors.white),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(width: 2, color: Theme.of(context).primaryColor),
// borderRadius: BorderRadius.circular(10),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(width: 2, color: Theme.of(context).primaryColor),
// borderRadius: BorderRadius.circular(10),
)
),
),
IconButton(
onPressed: clearText,
color: Theme.of(context).primaryColor,
icon: Icon(Icons.cancel_outlined)
)
],
),
Try below code and use suffixIcon for text overlapping issue
TextFormField(
decoration: InputDecoration(
labelText: 'Search',
hintText: 'Search Here',
suffixIcon: IconButton(
onPressed: () {
print('Button Pressed');
//put your clear function here
},
icon: Icon(
Icons.cancel_outlined,
),
),
/*suffixIcon: InkWell(
onTap: () {
print('Button Pressed');
//put your clear function here
},
child: Icon(
Icons.cancel_outlined,
),
),*/
border: OutlineInputBorder(),
),
),
Result
put IconButton on suffixIcon.
TextField(
textInputAction: TextInputAction.search,
controller: controller,
focusNode: focusNode,
autofocus: true,
onChanged: (text) {
text.length >= 4
? provider.fetchBySearchName(text)
: buildNoData();
},
decoration: InputDecoration(
suffixIcon: IconButton(
onPressed: clearText,
color: Theme.of(context).primaryColor,
icon: Icon(Icons.cancel_outlined)
),
labelText: 'Search',
labelStyle: TextStyle(color: Colors.white),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(width: 2, color: Theme.of(context).primaryColor),
// borderRadius: BorderRadius.circular(10),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(width: 2, color: Theme.of(context).primaryColor),
// borderRadius: BorderRadius.circular(10),
)
),
),
I tried create TextField with shadow effect using Container like this:
Code:
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.circular(5.0),
boxShadow: [
BoxShadow(
color: Colors.black12,
spreadRadius: 1,
blurRadius: 3,
),
],
),
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Product title required';
}
return null;
},
decoration: InputDecoration(
isDense: true,
hintText: 'Product title',
contentPadding: EdgeInsets.all(18.0),
filled: true,
fillColor: Colors.white,
border: OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide.none,
),
),
textAlign: TextAlign.start,
maxLines: 1,
),
)
But when validation has error then error message shows inside Container which is incorrect in my case:
How I can create TextField like this shadow with correctly displaying error message and error border colors like this but with shadow:
Try to wrap it with "Material" widget
Material(
elevation: 5,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Product title required';
}
return null;
},
decoration: InputDecoration(
isDense: true,
hintText: 'Product title',
contentPadding: EdgeInsets.all(18.0),
filled: true,
fillColor: Colors.white,
border: OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide.none,
),
),
textAlign: TextAlign.start,
maxLines: 1,
),
),