I'd like to ask on if there are anyway on how to compare in a conditional statement the two variable. As you can see, couponSalePriceCtrlr and couponOrigPriceCtrlr. I'd like to validate that the user's input in sale price SHOULD not be greater than the original price, but it seems like the validator accepts only the (value) parameter and a String data type.
Widget editCouponSalePriceWidget(couponSalePriceCtrlr, couponOrigPriceCtrlr) {
// converted the variable parameters into double data type
double convertedSalePrice = double.parse(couponSalePriceCtrlr);
double convertedOrigPrice = double.parse(couponOrigPriceCtrlr);
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 0.0),
child: TextFormField(
style: const TextStyle(fontFamily: 'Poppins', fontSize: 13),
controller: couponSalePriceCtrlr,
keyboardType: TextInputType.number,
decoration: InputDecoration(
suffixText: "*",
suffixStyle: TextStyle(color: Colors.red),
labelText: 'Sale Price',
labelStyle: const TextStyle(
fontSize: 15, fontFamily: 'Poppins', color: Color(0xFF152C4C)),
isDense: true,
prefixIcon: const Icon(Icons.person),
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Color(0xFFCECECE)),
borderRadius: BorderRadius.circular(12),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: const BorderSide(color: Color(0xFFCECECE)),
),
hintText: 'Orig Price',
fillColor: const Color(0xFFFEFEFE),
filled: true,
),
// however the validator only accepts, a string data type.
validator: (convertedSalePrice,convertedOrigPrice) {
if (convertedSalePrice!.isEmpty ||
!RegExp(r'[0-9]+[,.]{0,1}[0-9]*').hasMatch(convertedSalePrice)) {
return "Please enter a valid original price.";
} else {
return null;
}
},
),
);
}
I assume you have 2 TextFormField, one for original price, another for sale price. Of course it is String type, that's the rule :) Therefore you need to convert it to integer/double type. If your keyboardType is number, it is unnecessary to check user's input is string type, else do it.
TextFormField(
controller: couponOrigPriceCtrlr,
keyboardType: TextInputType.number,
)
TextFormField(
controller: convertedSalePrice,
keyboardType: TextInputType.number,
validator: (saleStr) {
double originalDouble = double.parse(couponOrigPriceCtrlr.text);
double saleDouble = double.parse(saleStr.text);
// check what ever you want here
// ...
}
)
Related
I have a text field that inputs a number and want to set that value equal to a double, but whenever I try it does nothing and I am not sure why.
Below is how the textfield is implemented
TextField(
keyboardType: TextInputType.number,
controller: _incomeController,
style: const TextStyle(
color: Colors.black,
),
decoration: const InputDecoration(
filled: true,
fillColor: Colors.white,
hintText: 'Balance',
hintStyle: TextStyle(color: Colors.grey),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
borderSide: BorderSide.none,
),
),
),
This is how I am trying to convert the text field to the double income.
income = _incomeController.text.trim() as double;
First seem like you are using wrong controller :
_balanceController instead of _incomeController
Second, you cannot cast string to double like that, instead try this:
income = double.tryParse(_balanceController.text.trim());
I have a form with 2 password inputs , one for password and the second to confirm it.
I was trying to do it like that :
final _passwordController = TextEditingController();
final _confirmpasswordController = TextEditingController();
String passwordInputValidator(TextEditingController _passwordController, value) {
if (value =! _passwordController.text) {
return 'Password doesnt match';
}
}
MakeInput('Type your password', true,
nameInputValidator, _passwordController)),
MakeInput(
'Confirm Password',
true,
passwordInputValidator,
_confirmpasswordController)),
Widget MakeInput(label, obscureText, validator, controller) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
label,
style: TextStyle(
fontSize: 15, fontWeight: FontWeight.w400, color: Colors.white),
),
SizedBox(
height: 5,
),
TextFormField(
obscureText: obscureText,
controller: controller,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
contentPadding:
EdgeInsets.symmetric(vertical: 0, horizontal: 12),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.purple[800])),
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.purple[800])),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.purple[800], width: 2.0),
)),
validator: validator),
This validator is the validator for the confirm password TextField.
So I tried passing the first password entered value as an argument in my validator and to compare it with my value which is the confirmed password.
I got this error in my function : A negation operand must have a static type of 'bool'. Try changing the operand to the '!'
I assume the error because of the dynamic type of the argument, but how to fix this error or even if there is any logic error .
You are passing the wrong comparison oparator =! use != instead
String passwordInputValidator(
TextEditingController _passwordController, value) {
if (value != _passwordController.text) {
return 'Password doesnt match';
}
}
I'm trying to add validation on textfield, i want when i leave any textfield empty it change its border color into red and display a error message, so and when i write something in it then it should hide the border error and message, which is happening but not in efficient way, here is what i'm doing.
i created the custom textfield
Widget textformfieldCustom(context,keyboardType,width,icon, controller,errortext,onchanged, hintText, labelText) {
return Container(
width: width,
child:TextFormField(
keyboardType:keyboardType,
decoration: InputDecoration(
contentPadding:EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
errorText:errortext,
labelText: labelText,
labelStyle: GoogleFonts.montserrat(color: HexColor("#6e6b7b")),
hintStyle: GoogleFonts.montserrat(),
hintText: hintText,
prefixIcon: icon,
focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)),borderSide: BorderSide(color: HexColor("#6610f2"))),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0))),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.red, width: 1))),
onSaved: (String? value) {
// This optional block of code can be used to run
// code when the user saves the form.
},
onChanged:onchanged,
controller: controller,
));
}
and calling it as like this
bool _validatetex = false;
textformfieldCustom(
context,
TextInputType.number,
MediaQuery.of(context).size.width * 0.9,
Icon(Icons.email,color: iconColor,),
phoneNoController,
_validatetex ? 'This is the required field' : null,
(value) {
setState(() {
phoneNoController.text.isEmpty ? _validatetex = true : _validatetex = false;
});
},
'Enter your phone number',
'Phone number'
),
i'm using a bool type variable in errortext and changing its state in onchanged, so i want to do it in efficient way, like if i have 10 textfields so i have to initialize 10 bool variables so this is not a good way to go. please help how to achieve this in efficient way.
You can use the validator property in `TextField``
validator: (value) {
if (value == null || value.isEmpty) {
return 'This is the required field';
}
return null;
},
Then your code,
Widget textformfieldCustom(context,keyboardType,width,icon, controller,errortext,onchanged, hintText, labelText) {
return Container(
width: width,
child:TextFormField(
keyboardType:keyboardType,
decoration: InputDecoration(
contentPadding:EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
labelText: labelText,
labelStyle: GoogleFonts.montserrat(color: HexColor("#6e6b7b")),
hintStyle: GoogleFonts.montserrat(),
hintText: hintText,
prefixIcon: icon,
focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)),borderSide: BorderSide(color: HexColor("#6610f2"))),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0))),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.red, width: 1))),
onSaved: (String? value) {
// This optional block of code can be used to run
// code when the user saves the form.
},
onChanged: onchanged,
controller: controller,
// Validator
validator: (value) {
if (value == null || value.isEmpty) {
return 'This is the required field';
}
return null;
},
));
}
I got my answer from this tutorial.
how to add two textformfields controllers in which int value is given?
when i was doing it showing me error saying that textediting controller can't be int.
child: ok != null ? Text('${okk1+ok1}', style: TextStyle(color: Colors.black, fontSize: 14),) :Text(""),
first textformfield:-
Container(
height: MediaQuery.of(context).size.height/12,
width: MediaQuery.of(context).size.width/3 ,
padding: const EdgeInsets.all(10.0),
child: TextFormField(
controller: _hire,
inputFormatters: [
new LengthLimitingTextInputFormatter(7),
],
keyboardType: TextInputType.text,
onChanged: (str) {
setState(() {
okk = _advance.text as int;
ok1 =int.parse(_hire.text);
});
print(ok1);
},
decoration: const InputDecoration(
labelText: '',
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.grey),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.grey),
),
),
onSaved: (String value) {
// This optional block of code can be used to run
// code when the user saves the form.
},
validator: (String value) {
return value.contains('#')
? 'Do not use the # char.'
: null;
},
),
),
second textformfield:-
Container(
height: MediaQuery.of(context).size.height/12,
width: MediaQuery.of(context).size.width/3 ,
padding: const EdgeInsets.all(10.0),
child: TextFormField(
controller: _advance,
inputFormatters: [
new LengthLimitingTextInputFormatter(7),
],
keyboardType: TextInputType.numberWithOptions(),
onChanged: (str) {
setState(() {
ok = _advance.text;
okk1 =int.parse(_advance.text);
});
print(okk1);
},
decoration: const InputDecoration(
labelText: '',
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.grey),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.grey),
),
),
onSaved: (String value) {
// This optional block of code can be used to run
// code when the user saves the form
},
validator: (String value) {
return value.contains('#')
? 'Do not use the # char.'
: null;
},
),
),
these are the textformfield controllers for two textformfield in which data is 45 and 5 but in string because controllers text is in string format and i want to add these two controllers and the result would be 50.
You can add them like this.
If x1 and x2 are two textcontrollers.
var result = int.parse(x1.text) + int.parse(x2.text)
I am new with flutter.
I am making a user registration form, I want to achieve the following visual effect:
When a TextFormField is normal on the form, it looks like this:
But I want the following, when the textformfield is in "focus". When the user is typing it looks like this:
This is my average textFormField
TextFormField(
initialValue: name,
onChanged: (val) {
setState(() {
name = val;
print(name);
});
},
decoration: InputDecoration(
hintText: "Nombres",
hintStyle: TextStyle(
fontSize: scalador.setSp(22) * 2.63,
color: Color(0xFF949494)),
),
style: TextStyle(
color: Color(0xFF242427),
fontSize: scalador.setSp(22) * 2.63,
),
validator: (value) {
if (value.isEmpty) {
return 'Por favor ingrese su(s) Nombre(s)';
} else {
if (value.length < 4)
return 'El nombre debe tener mas de 4 caracteres';
}
return null;
}),
any ideas?
add labelText: 'Nombres', Property into InputDecoration :
decoration: InputDecoration(
hintText: "Nombres",
hintStyle: TextStyle(
fontSize: scalador.setSp(22) * 2.63,
color: Color(0xFF949494)),
),
labelText: 'Nombres',
)
source :https://api.flutter.dev/flutter/material/TextFormField-class.html
To add the desired textformfield in "focus" detail, you will need to include several things. To begin with, you will need a labelText which will be set to the string of your choice. In your case, it would probably be: labelText: "Nombres". Next, you will need an enabledBorder: which you can assign to OutlineInputBorder(in which you can specify border radius, border Side(color)) to your liking. Once you have the enabledBorder for when the user does not have it in "focus" then you will need focusedBorder: in which again you will assign to OutlineInputBorder() similar to enabledBorder. Lastly, you will need border: in which you can give it OutlineInputBorder(and your desired borderRadius inside).
This is an example for your reference
Padding(
padding: EdgeInsets.all(10),
child: new TextFormField(
decoration: new InputDecoration(
labelText: "Name",
labelStyle: TextStyle(
color: Color(0xFF264653),
),
fillColor: Colors.white,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Color(0xFF264653),
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(color: Color(0xFF264653))),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
),
),
),
),
Depending on what you will be doing, I recommend checking out this article: https://medium.com/swlh/working-with-forms-in-flutter-a176cca9449a and/or
https://medium.com/#mahmudahsan/how-to-create-validate-and-save-form-in-flutter-e80b4d2a70a4