Everything works fine except the space between the elements/user input and bottom bar. I tried different methods to get rid of that space: content padding, box constraints, prefix icon constraints etc. None worked. Eventually I limited the height of this widget, but then my error message was placed on top of user input and I was getting this message Another exception was thrown: BoxConstraints has a negative minimum height.
Here is the code:
Widget _emailField(FormBloc formBloc) {
return StreamBuilder(
stream: formBloc.email,
builder: (context, AsyncSnapshot<String> snapshot) {
return TextFormField(
autofocus: false,
keyboardType: TextInputType.emailAddress,
autovalidateMode: AutovalidateMode.onUserInteraction,
validator: (value) {
if (value == null) {
return "Email cannot be empty";
} else {
if (value.isEmpty) {
return "Email cannot be empty";
}
}
},
onChanged: formBloc.changeEmail,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
prefixIcon: const Icon(
Icons.email,
size: 15,
),
contentPadding: const EdgeInsets.all(0),
labelText: "Email",
labelStyle: const TextStyle(fontSize: 14),
errorText:
snapshot.error != null ? snapshot.error as String : null,
),
);
}
);
}
I need to make everything work as before, except this time I do need to have no space between bottom border and input elements, how can I do so?
First inside InputDecoration(), you can give zero padding to your prefix icon.
Then set prefixIconConstraints to BoxConstraints(maxHeight:0)
Still isn't enough you can give negative value to contentPadding: EdgeInsets.only(bottom:-5),.
InputDecoration(
prefixIcon: Padding(
padding: EdgeInsets.only(right:10),
child:const Icon(
Icons.email,
size: 15,
),
),
prefixIconConstraints: BoxConstraints(maxHeight:0),
contentPadding: EdgeInsets.only(bottom:-5),
labelText: "Email",
labelStyle: const TextStyle(fontSize: 14),
errorText:"error",
)
Related
I have a form that have one TextFormField called amount and when it validates on submit it displays error message, but I noticed that the length of the text is bigger than the field size and it does this
Image 1
I've put errorMaxLines: 5. If I put 1 line, it would show only "This is the error ..."
Is there a way to display the complete error message in one line, even if it is bigger than the field?
Something like this
Image 2
Code:
Widget textAmmount() {
return Padding(
padding: const EdgeInsets.fromLTRB(20, 20, 20, 0),
child: SizedBox(
width: 100, // i dont want it bigger
child: TextFormField(
controller: controller,
decoration: const InputDecoration(
border: OutlineInputBorder(),
hintText: "Ammount",
labelText: "Ammount",
),
validator: (value) {
if (num.tryParse(value) == null) {
return 'This is the error i want to display.';
}
return null;
},
),
),
);}
Simply just use error style and error max line to define the maximum number of line to break to next line
...
decoration: const InputDecoration(
errorStyle: TextStyle(),//<--Here
errorMaxLines: 1,//<-- Here
border: OutlineInputBorder(),
hintText: "Ammount",
labelText: "Ammount",
),
...
TextField (
decoration: InputDecoration(
hintText: 'Need extra ice or have another request?',
contentPadding: EdgeInsets.all(10),
),
//else {
// decoration: InputDecoration(
// hintText: Provider.of<OrderProvider>(context, listen: false).specialNotes,
// contentPadding: EdgeInsets.all(10),
// ),}
onChanged: (newText) {
Provider.of<OrderProvider>(context, listen: false)
.updateSpecialRequests(newText);
},
keyboardType: TextInputType.multiline,
maxLines: null,
),
I want to make a conditional statement that determines whether the code above the commented code is read or the commented code below it gets read. Textfield is an array of children. However I try to do this, it breaks my code. The TextField invariably is no longer lit up in gold as it is when the code is working. The online suggestions have not been working.
You can use tenary operators
TextField (
decoration: condition ? InputDecoration(
hintText: 'Need extra ice or have another request?',
contentPadding: EdgeInsets.all(10),
): InputDecoration(
hintText: Provider.of<OrderProvider>.specialNotes,
contentPadding: EdgeInsets.all(10),
),
onChanged: (newText) {
Provider.of<OrderProvider>(context, listen: false)
.updateSpecialRequests(newText);
},
keyboardType: TextInputType.multiline,
maxLines: null,
),
I am trying to update a text widget as the user types, its working but i don't see the input as I type
TextFormField(
autofocus: true,
controller: amountController,
keyboardType: TextInputType.number,
cursorColor: Colors.amber,
decoration: InputDecoration(
hintText: "Enter Amount",
prefixIcon: Material(
elevation: 0,
borderRadius: BorderRadius.all(Radius.circular(30)),
child: Icon(
Icons.phone_outlined,
size: 15,
color: Color(0xff020529),
),
),
border: InputBorder.none,
contentPadding:
EdgeInsets.symmetric(horizontal: 25, vertical: 13)),
onChanged: (value) {
add(value);
},
),
this is the widget
Text( x.toString(),
style: TextStyle(fontWeight: FontWeight.bold),
),
This is my method
add(String value) {
var ans = 36 * double.parse(value);
print('ddd');
setState(() {
x = ans;
});
What's happening is double.parse is failing because the given value can't be converted to a number.
One option to handle this is by using a try catch (see following code sample), and then setting the displayed value to 0 (or could also do something like set an error message saying something like "invalid input" if the user enters something like "123d"
add(String value) {
double ans;
try {
ans = 36 * double.parse(value);
} on FormatException catch (e) {
// string couldn't be formatted to double
ans = 0;
}
setState(() {
x = ans;
});
}
I used a try catch, but you could also check if value is empty, and/or add an onError callback to double.parse.
I have the following input text form field I'm trying to have some space better the input and text or padding
InputDecoration buildInputDecoration(
String hintText, String lableText, double fontSize) {
return InputDecoration(
//hintText: hintText,
labelText: lableText,
labelStyle: TextStyle(
fontSize: fontSize,
),
contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 55.0),
);
}
final usernameField = Container(
child: TextFormField(
//textAlignVertical: TextAlignVertical.top,
autofocus: false,
validator: validateEmail,
onSaved: (value) => _email = value,
decoration: buildInputDecoration('Confirm password', 'Email', 16),
));
As you can see here it looks good
but when I input text the input text is all the way to the top and not part of the line or border
How can I fix this
The padding will work indeed. But in order to have 0 padding on a TextField, consider adding the dense property as following
InputDecoration(
// ...
isDense: true,
),
i have a text form field that user enter to it a code that sent to it and i must decide if input code is true or false but can not save value of text form field i have a button like it
GestureDetector(
onTap: () {
_formKey.currentState.save();
setState(() {
inputcode=key.getter("sms");
print(inputcode);
print(verifycode);
});
},
child: inputcode==verifycode?send:
VirtualBotton("please enter correct code","ok",40.0,10.0,width: 120.0,),
)
but i must press two times button for done this work
in this code when i enter correct code first run virtual Button class and second times that i press button run correct code how to run on tap before build child in button this is text form field
TextFormField(
inputFormatters: [
new LengthLimitingTextInputFormatter(30),
],
onSaved: (value) {
key.setter(id, value);
},
textAlign: alignment == null ? TextAlign.right : alignment,
maxLines: maxlines==null?1:maxlines,
style: TextStyle(
fontSize: 14,
),
textDirection: TextDirection.rtl,
controller: ctrl,
validator: (String value) {
if (value.isEmpty) {
return "";
}
return null;
},
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: const EdgeInsets.all(0.0),
hintText: _hint,
errorStyle: TextStyle(height: 0),
hintStyle: TextStyle(
color: hintconlor == null ? Colors.grey : hintconlor,
fontSize: hintsize == null ? 13 : hintsize)),
),
);
you can add TextEditingController and listen to controller changes. Here are docs with examples