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",
),
...
Related
How can I display a hint text in a TextField if it contains only space characters like ' '?
const TextField(
decoration: InputDecoration(
hintText: 'a hint text'
),
),
In this code example the hint text is only displayed if the content of the TextField is empty.
I need this because I need to detect when the user press the backspace button on an empty TextField. Read more here: https://medium.com/super-declarative/why-you-cant-detect-a-delete-action-in-an-empty-flutter-text-field-3cf53e47b631
After diving deeper into the problem I found a solution with InputDecorator:
const InputDecorator(
isEmpty: true, // if true, the hint text is shown
decoration: InputDecoration(
hintText: 'a hint text'
),
child: TextField(),
),
So my solution is this:
String _value = ''; // state variable
...
InputDecorator(
isEmpty: _value.trim().isEmpty, // override the default isEmpty behavior
decoration: const InputDecoration(
hintText: 'a hint text',
),
child: TextField(
onChanged: (v) => setState(() => _value = v),
),
),
Probably, you should use decoration property of your TextField.
Something like that:
SizedBox(
height: 50,
width: 100,
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
label: Text('Your stable hint')
),
)
),
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",
)
I have ui of text field from Figma.
There are 2 hint texts where 1st hintText is located at the beginning of textfield and other one is at the end.
As can be seen, trailing is hint text which is disappearing when user inputs number.
If you have any idea please share how to make this kind of text field)
Try this:
TextField(
textAlign: TextAlign.end,
decoration: InputDecoration(
prefixIcon: Padding(
padding: EdgeInsets.all(15), child: Text('Prefix')),
border: OutlineInputBorder(),
hintText: "Cym",
),
),
You can just use the trailing for the hint and can you onChanged method to handle changes.. Like you will be managing your text on the behavior of input. For example if the input is empty then you text will be something like "A" if you input something text will be changed.
TextFormField(
decoration: InputDecoration(
suffix: Text(text)
),
onChanged: (value) {
// handle or change your text here
if(value.isEmpty){
setState(() { text = "A"});
}
else{
setState(() { myState = "any text"});
}
},
)
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 create a kind of forum using text fields. The thing is that when you fill in the blacks and press next and than you go back again, the text field will appear empty as if you have no value in it but its actually saved. I want it so that you can see what you entered inside even if you go forward and than back. I will attach some photos so you can understand better what i mean.
Here is the photo of the text field:
https://gyazo.com/9ceb0ef4f27db1be842cbdfac885fc01
In this photo i fill in the blanks:
https://gyazo.com/6365ab3fcc9d8167a1c9163563fbf3d7
Than i go forward:
https://gyazo.com/8490115e74b57e96cd1f3a9486db5fad
And when i go back again, the text field looks empty but the value is not empty, i want it so that i can still see the value inside:
https://gyazo.com/07eec4c58149641926d7f037bb0f949c
Here i will put the code of the TextFIeld:
Container(
margin: EdgeInsets.only(top: 20),
width: 360,
child:
Form(
autovalidateMode: AutovalidateMode.always,
onChanged: () {
Form.of(primaryFocus.context).save();
},
child: TextFormField(
decoration: new InputDecoration(
labelText: "Event Name",
fillColor: Colors.white,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide: new BorderSide(),
),
//fillColor: Colors.green
),
validator: (val) {
if (val.length == 0) {
return "Event Name cannot be empty";
} else {
return null;
}
},
onSaved: (String value) {
eventname = value;
},
style: new TextStyle(
fontFamily: "Poppins",
))))
add an initial value to your textformfield by loading the saved value