Passing and Comparing a controller in Flutter - flutter

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';
}
}

Related

how to use validator with two variables in one textformfield?

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
// ...
}
)

How to hide error message and error border from textfield when writing on it in flutter

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.

Flutter Textformfield should be responsive to typing and error

I've often seen where fields are responsive when users are typing, giving realtime feedback. An example is when I'm typing confirm password or email, if the confirm password or email hasn't matched the password while typing it returns error by marking turning the border of the field red until it matches the correct input. I have written this code, how do I improve the code to be responsive as described.
Widget _buildConfirmPasswordTF() {
return Column(crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
// Text('Password', style: kLabelStyle,),
SizedBox(height: 10.0),
Container(alignment: Alignment.centerLeft, decoration: kBoxDecorationStyle, height: 60.0, child: TextFormField(
validator: ( confirmPassword ){
if ( confirmPassword.trim() != _password.isValidPassword ) {
return null;
} else {
return 'Password doesn\'t match';
}
},
obscureText: true, style: TextStyle(color: Colors.white, fontFamily: 'OpenSans',),
decoration: InputDecoration(border: InputBorder.none, contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(Icons.lock, color: Colors.white,),
hintText: 'Enter Confirm Password',
hintStyle: kHintTextStyle,
errorBorder: OutlineInputBorder( borderSide: BorderSide( color: Colors.red ) ),
focusedErrorBorder: OutlineInputBorder( borderSide: BorderSide( color: Colors.red ) )
),
),
),
],
);
}
This is where I set the hintText
final kHintTextStyle = TextStyle(
color: Colors.white54,
fontFamily: 'OpenSans',
);
This is where I set the labelStyle
final kLabelStyle = TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: 'OpenSans',
);
This is where I set the border decoration
final kBoxDecorationStyle = BoxDecoration(
color: Color(0xFF6CA8F1),
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 6.0,
offset: Offset(0, 2),
),
],
);
you need autovalidateMode: AutovalidateMode.onUserInteraction, pass this in textformfield.
You can do that with a Form() providing it a key and a autoValidateMode to make sure the fields have value or that the value is something you except, you can add another field to confirm the passwork or email and compare the value of the field in the onChanged with the value of the other email field to make sure they match.
import 'package:email_validator/email_validator.dart';
final formKey = GlobalKey<FormState>();
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
bool isValid = false;
_emailController.addListener(
() {
//With this, you can "listen" all the changes on your text while
//you are typing on input
//use setState to rebuild the widget
if (EmailValidator.validate(_emailController.text)) {
setState(() {
isValid = true;
});
} else {
setState(() {
isValid = false;
});
}
},
);
Form(
key: formKey,
autovalidateMode: AutovalidateMode.onUserInteraction,
child: Column(
children: [
Padding(
padding: EdgeInsets.symmetric(
horizontal: size.width * 0.105),
child: TextFormField(
validator: (value) =>
!EmailValidator.validate(value)
? 'Enter a valid email'
: null,
keyboardType: TextInputType.emailAddress,
textAlign: TextAlign.center,
controller: _emailController,
decoration: kInputDecoration.copyWith(
hintText: 'Enter your email'),
),
),
SizedBox(
height: 18,
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: size.width * 0.105),
child: TextFormField(
obscureText: true,
validator: (value) =>
value.isEmpty ? 'Enter your password' : null,
keyboardType: TextInputType.text,
textAlign: TextAlign.center,
controller: _passwordController,
decoration: kInputDecoration.copyWith(
hintText: 'Enter your password'),
),
),
],
),
),

Flutter & Textfield : How do I restrict my user from using space in textfield by automatically removing that space?

How do I restrict my user from using space in textfield by automatically removing that space when the user finish typing?
For example, if the user type King of Light, it will apply as KingofLight after he/she steps away from the textfield.
TextFormField(
initialValue: nickname != null
? nickname
: current_user.nickname,
decoration: InputDecoration(
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.grey),
borderRadius: BorderRadius.circular(6),
),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 1.0),
borderRadius: BorderRadius.circular(6),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 1.0),
borderRadius: BorderRadius.circular(6),
),
hintText: 'Empty',
hintStyle: TextStyle(
color: Colors.grey[400],
fontSize: 20,
//fontWeight: FontWeight.bold,
),
),
style: TextStyle(
fontSize: 20,
// fontWeight: FontWeight.bold,
),
validator: (val) => val.length < 2
? 'Enter a nickname 2+char long'
: null,
onChanged: (val) {
val = val.replaceAll(' ', '');
setState(() => nickname = val);
},
),
please help me! thank you!
Text field which does not allow spaces, using RegExp. As below-
TextFormField(
inputFormatters: [
if (denySpaces)
FilteringTextInputFormatter.deny(
RegExp(r'\s')),
])
Above solution worked for me, to block space from keyboard.
One way you do this is like this using TextEditingController and can call formatNickname() as per your use case.
class _MyWidgetState extends State<MyWidget>{
FocusNode node = new FocusNode();
TextEditingController tc = TextEditingController();
#override
void initState(){
node.addListener((){
if(!node.hasFocus){
formatNickname();
}
});
super.initState();
}
void formatNickname(){
tc.text = tc.text.replaceAll(" ", "");
}
#override
Widget build(BuildContext context) {
return Column(
children: [
TextFormField(
focusNode: node,
controller: tc,
),
TextFormField(),
RaisedButton(
child: Text('Format'),
onPressed: (){
formatNickname();
},
),
],
);
}
}

Is there a way to keep keyboard focus?

I have a TextField widget to add players in a List. But I want the keyboard to stay focus when I add players, and on submit, my keyboard keeps loosing focus.. Any Idea ?
Here is my TextField widget:
TextField(
textCapitalization: TextCapitalization.words,
onChanged: (val) => playerName = val.trim(),
onSubmitted: (val) {
if (playerName != null && playerName != '') {
Provider.of<PlayerProvider>(context, listen: false).addPlayer(playerName);
HapticFeedback.lightImpact();
}
},
maxLength: 19,
autocorrect: false,
decoration: new InputDecoration(
counterText: "",
border: new OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: const BorderRadius.all(
const Radius.circular(30.0),
),
),
filled: true,
contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 20),
hintStyle: GoogleFonts.rubik(color: Colors.grey[500], fontWeight: FontWeight.bold),
hintText: AppLocalizations.of(context).translate('player_selection_page_hint'),
fillColor: Colors.white),
)
By the way, the autofocus: true works but it kinda unFocus the keyboard and give the focus back instantly... So it's not nice to watch. So If you have another idea please.
I think you should try using FocusNode.
class MyCustomForm extends StatefulWidget {
#override
_MyCustomFormState createState() => _MyCustomFormState();
}
// Define a corresponding State class.
// This class holds data related to the form.
class _MyCustomFormState extends State<MyCustomForm> {
// Define the focus node. To manage the lifecycle, create the FocusNode in
// the initState method, and clean it up in the dispose method.
FocusNode myFocusNode;
#override
void initState() {
super.initState();
myFocusNode = FocusNode();
}
#override
void dispose() {
// Clean up the focus node when the Form is disposed.
myFocusNode.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return TextField(
focusNode: myFocusNode
textCapitalization: TextCapitalization.words,
onChanged: (val) => playerName = val.trim(),
onSubmitted: (val) {
if (playerName != null && playerName != '') {
Provider.of<PlayerProvider>(context, listen: false).addPlayer(playerName);
HapticFeedback.lightImpact();
}
myFocusNode.requestFocus();
},
maxLength: 19,
autocorrect: false,
decoration: new InputDecoration(
counterText: "",
border: new OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: const BorderRadius.all(
const Radius.circular(30.0),
),
),
filled: true,
contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 20),
hintStyle: GoogleFonts.rubik(color: Colors.grey[500], fontWeight: FontWeight.bold),
hintText: AppLocalizations.of(context).translate('player_selection_page_hint'),
fillColor: Colors.white),
);
}
}
Well, you can go with FocusNode.
But I have a workaround for this.
I usually set the
autovalidate:true
and in validator always return some text.
So whenever the user clicks on the textfield it never loses the focus.
Thus the flutter always keeps the focus on the text field.
But for this, you've to use TextFormField.
But the correct way is to go with FocusNode.
Here's the Code.
TextFormField (
autovalidate : true
validator: (value) {
return '';
},
textCapitalization: TextCapitalization.words,
onChanged: (val) => playerName = val.trim(),
onSaved: (val) {
if (playerName != null && playerName != '') {
Provider.of<PlayerProvider>(context, listen: false).addPlayer(playerName);
HapticFeedback.lightImpact();
}
},
maxLength: 19,
autocorrect: false,
decoration: new InputDecoration(
counterText: "",
border: new OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: const BorderRadius.all(
const Radius.circular(30.0),
),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: const BorderRadius.all(
const Radius.circular(30.0),
),
),
focusedErrorBorder: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: const BorderRadius.all(
const Radius.circular(30.0),
),
),
filled: true,
contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 20),
hintStyle: GoogleFonts.rubik(color: Colors.grey[500], fontWeight: FontWeight.bold),
hintText: AppLocalizations.of(context).translate('player_selection_page_hint'),
fillColor: Colors.white),
)
and then you can use this to call the onSaved method
_formKey.currentState.save(); // And it will call the onSaved method
Here the _formKey
Form(
key: _formKey,
child: Widget(),
),
Wrap the whole widget tree where your textformfield is present.