textfield validation fails in flutter - flutter

this is my first question here. I am not sure if I am writing it in a correct form.
I would like to validate TextField widget but it fails and throw an error.
here is how the code look like.
void surfaceCalc() {
if(_length == '' && _length == null && _width == '' && _width == null){
print('one of the field is empty');
} else{
final surfaceArea = double.parse(_length.text) *
double.parse(_width.text);
}
but the problem with this, that when i click on calculate button, it goes to this file double_patch.dart and highlight invalid double. as far as i understand, it throws and error because the text field is empty and has not been validated, it skips the validation and goes to calculation and throws an error. but if i type values in the textfield, it works fine.
any help is highly appreciated

Related

Is it possible to display validation error message out side from the TextFormField

I am trying to display error message (show simple toast of error) outside from textformfield when I click submit button in login screen.
currently, error show in bottom of textformfield like this.
I am trying to display error message like this
I am trying to display error message (show simple toast of error) outside from textformfield when I click submit button in login screen. Currently error show in bottom of textformfield.i am trying to display error message in toast form.
First you need to 1 String for each field
String nameError = '';
Now you need to create validation function for this field like
void invalidName() {
nameError = "Enter name";
}
Now you need to create function where you can check all validation
bool validateInput() {
try {
if (email.isNotEmpty) {
return true;
} else {
if (nameController.text.isEmpty) { // Here check your controller value
invalidName(); // here define validation error
...
...
}
return false;
}
} catch (e) {
return false;
}
}
Now you just need to call validateInput() function in your button if it return true then call your API or something otherwise shows an error in toast message
nameError == '' ? SizedBox() : FlutterToast(nameError)

How to check if the fist element's loading has error and show it Dart/Flutter?

What is the proper way to check if the list of elements is loading for the first time and if it has the exception to show the error to user?
As I understand I should create the variable which will indicate that I have the first list of item loading, so I wrote something like this:
bool isFirstLoading = true;
Future<void> loadItems()async{
if(!isFirstLoading){
final value = await model.loadListPlaceAgain();
}else if(isFirstLoading && Exception is true){
return _dialogController.showSnackBar(const PaginationBarError());
}
}

Dart null safety with if check [duplicate]

This question already has answers here:
"The operator can’t be unconditionally invoked because the receiver can be null" error after migrating to Dart null-safety
(3 answers)
Closed 1 year ago.
I am use Dart Null Safety version
Have a widget:
itemBuilder expects a Widget type.
footer is Widget? type and will be null
Why Dart ignoring my null check? Also I only found one solution:
if (footer != null && index == data.length) {
return footer ?? const SizedBox();
}
Why Dart ignoring my null check?
Because when the following code executed:
Widget? footer;
...
if (footer != null && index == data.length) {
return footer;
}
There is a probability that your footer is set to null from the other part of your code hence the error is shown.
You can add ! if you're completely sure that the footer won't be nulled for the rest of its life. So, you can use this:
if (footer != null && index == data.length) {
return footer!;
}
but your solution much safer because it always check if footer not null:
if (footer != null && index == data.length) {
// whenever footer is nulled, return SizedBox
return footer ?? const SizedBox();
}
Correct code:
final footer = this.footer;
if (footer != null && index == data.length) {
return footer;
}
Why? Because subclass of this class can override footer getter.
i.e.:
Widget get footer {
if (Random().nextBool()) return null;
else return super.footer;
}
So every call to footer could return null.
Personally, I always do '!'(if (footer != null) footer!) after check. Because providing getter with side effects is a large code smell.
You can use this code snippet to check that a variable is null or not
a != null && [do something]

Resetting form and input fields

So I am making a simple todo list app with Framework7 and VueJS, but I'm struggling to understand how to reset the input fields.
<f7-list id="todo-form">
<f7-list-input id="item-input" type="text" name="listitem">
</f7-list-input>
</f7-list>
<f7-button #click="newItem">Add task</f7-button>
newItem() {
let formData = this.$f7.form.convertToData('#todo-form');
this.listItemName = formData.listitem;
if (this.listItemName == '' || this.listItemName === undefined) {
return false;
} else {
this.listItems.push(this.listItemName);
console.log(this.$$('#item-input')); // What to do here?
}
}
I would like to reset the item-input field as I click the button. I tried using Dom7 (not jQuery!) for this but there seems to be nothing storing the form input value.. After googling all I could find is suggestions to do $$('#item-input').val('') but there is no .val when I look through the element in the console.
Help is, as always, much appreciated!

Event.stop within .each (prototype)

I am struggling with function that should check form fields before submitting.
I have some select (dropdown fields) and a text field. None of them should be empty for submit.
The script http://jsfiddle.net/6KY5J/2/ to reproduce.
I check dropdown fields within .each and additional text field. Here is the function:
function checkFields(e) {
$$('.dropdown').each(function (element) {
if (element.selectedIndex === 0) {
alert('Fill all dropdown fields!');
Event.stop(e);
throw $break;
return;
}
});
if ($('sometext').value == '') {
alert('Fill the input!');
Event.stop(e);
return;
}
alert('OK!');
}
But I am not able to prevent further execution of the script if one of dropdown is empty. Event.stop(e) seems to to work for the input field only in the second part.
Desired behaviour:
Check dropdowns, if one is empty, stop execution, do not make any
further checks.
Check text input field only if dropdowns are not empty.
Submit only if everything if filled.
The issue is in step 1. My script does not stop here, alerts, but does not stop. Any idea? Thank you!
function checkFields(e) {
var dropdownsokay = true;
$$('.dropdown').each(function (element) {
if (dropdownsokay && element.selectedIndex === 0) {
alert('Fill all dropdown fields!');
Event.stop(e);
dropdownsokay = false;
}
});
if(dropdownsokay) { //only check textfield if all the dropdowns are okay
if ($('sometext').value == '') {
alert('Fill the input!');
Event.stop(e);
return;
}
alert('OK!');
}
}