Mixing
Show/Hide Passwords in Flutter's TextFormField
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
2
I'm working on a TextFormField to accept passwords. I have set the suffix icon to have IconButton child to detect on click events and to toggle the obscuretext attribute of the TextFormField. The callback function for the iconButton gets called but the TextFormField doesn't get repainted. Any ideas on how to solve this?
static Widget buildTextFormField(String id,
FormFieldValidator<String> validateField,
FormFieldSetter<String> saveField,
InputDecoration decoration,
EdgeInsetsGeometry paddingInfo,
EdgeInsetsGeometry marginInfo,
TextInputType keyboardType,
{bool obscureField:false, double width:328.0,
TextEditingController controller}
){
return Container(
padding: paddingInfo,
margin: marginInfo,
width: width,
child: TextFormField(
key: Key(id),
obscureText: obscureField,
validator: validateField,
onSaved: saveField,
keyboardType: keyboardType,
decoration: decoration,
controller: controller,
),
);
}
InputDecoration passwordDecoration = InputDecoration(
hintText: 'Password',
labelText: 'Enter your password',
suffixIcon:
IconButton(
icon: Icon(
_passwordVisible ? Icons.visibility : Icons.visibility_off,
semanticLabel: _passwordVisible ? 'hide password' : 'show password',
),
onPressed: () {
setState(() {
_passwordVisible ^= true;
//print("Icon button pressed! state: $_passwordVisible"); //Confirmed that the _passwordVisible is toggled each time the button is pressed.
});
}),
labelStyle: TextStyle(
fontFamily: 'Roboto Medium',
fontSize: 12.0,
color: Color(0x99000000),
letterSpacing: 0.4,
),
);
final passwordPaddingInfo = const EdgeInsets.only(top: 15.0, bottom:15.0,
left: 22.0, right:25.0);
this._passwordField = AdministrationComponents.
buildTextFormField('passwordField', validatePassword,
(value) => _password = value, passwordDecoration, passwordPaddingInfo,
null, null, controller:_passwordController,
obscureField: !_passwordVisible);
flutter flutter-layout asked Jan 3 at 5:56
topeolufetopeolufe
213
|
show 4 more comments
2
I'm working on a TextFormField to accept passwords. I have set the suffix icon to have IconButton child to detect on click events and to toggle the obscuretext attribute of the TextFormField. The callback function for the iconButton gets called but the TextFormField doesn't get repainted. Any ideas on how to solve this?
static Widget buildTextFormField(String id,
FormFieldValidator<String> validateField,
FormFieldSetter<String> saveField,
InputDecoration decoration,
EdgeInsetsGeometry paddingInfo,
EdgeInsetsGeometry marginInfo,
TextInputType keyboardType,
{bool obscureField:false, double width:328.0,
TextEditingController controller}
){
return Container(
padding: paddingInfo,
margin: marginInfo,
width: width,
child: TextFormField(
key: Key(id),
obscureText: obscureField,
validator: validateField,
onSaved: saveField,
keyboardType: keyboardType,
decoration: decoration,
controller: controller,
),
);
}
InputDecoration passwordDecoration = InputDecoration(
hintText: 'Password',
labelText: 'Enter your password',
suffixIcon:
IconButton(
icon: Icon(
_passwordVisible ? Icons.visibility : Icons.visibility_off,
semanticLabel: _passwordVisible ? 'hide password' : 'show password',
),
onPressed: () {
setState(() {
_passwordVisible ^= true;
//print("Icon button pressed! state: $_passwordVisible"); //Confirmed that the _passwordVisible is toggled each time the button is pressed.
});
}),
labelStyle: TextStyle(
fontFamily: 'Roboto Medium',
fontSize: 12.0,
color: Color(0x99000000),
letterSpacing: 0.4,
),
);
final passwordPaddingInfo = const EdgeInsets.only(top: 15.0, bottom:15.0,
left: 22.0, right:25.0);
this._passwordField = AdministrationComponents.
buildTextFormField('passwordField', validatePassword,
(value) => _password = value, passwordDecoration, passwordPaddingInfo,
null, null, controller:_passwordController,
obscureField: !_passwordVisible);
asked Jan 3 at 5:56
topeolufetopeolufe
213
1
Please update your question adding the code instead of the image.
– diegoveloper
Jan 3 at 5:58
@diegoveloper please see update. Thanks!
– topeolufe
Jan 3 at 6:14
is your password visible when you press the eye-Icon ? what's the issue? paste your build method
– diegoveloper
Jan 3 at 6:21
Are you calling the buildTextFormField in your build() method ?
– Shyju Madathil
Jan 3 at 6:22
@diegoveloper No, it not visible when I press the IconButton. However, I see that the value of _passwordVisible toggles when the button is pressed.
– topeolufe
Jan 3 at 6:23
|
show 4 more comments
2
2
2
I'm working on a TextFormField to accept passwords. I have set the suffix icon to have IconButton child to detect on click events and to toggle the obscuretext attribute of the TextFormField. The callback function for the iconButton gets called but the TextFormField doesn't get repainted. Any ideas on how to solve this?
static Widget buildTextFormField(String id,
FormFieldValidator<String> validateField,
FormFieldSetter<String> saveField,
InputDecoration decoration,
EdgeInsetsGeometry paddingInfo,
EdgeInsetsGeometry marginInfo,
TextInputType keyboardType,
{bool obscureField:false, double width:328.0,
TextEditingController controller}
){
return Container(
padding: paddingInfo,
margin: marginInfo,
width: width,
child: TextFormField(
key: Key(id),
obscureText: obscureField,
validator: validateField,
onSaved: saveField,
keyboardType: keyboardType,
decoration: decoration,
controller: controller,
),
);
}
InputDecoration passwordDecoration = InputDecoration(
hintText: 'Password',
labelText: 'Enter your password',
suffixIcon:
IconButton(
icon: Icon(
_passwordVisible ? Icons.visibility : Icons.visibility_off,
semanticLabel: _passwordVisible ? 'hide password' : 'show password',
),
onPressed: () {
setState(() {
_passwordVisible ^= true;
//print("Icon button pressed! state: $_passwordVisible"); //Confirmed that the _passwordVisible is toggled each time the button is pressed.
});
}),
labelStyle: TextStyle(
fontFamily: 'Roboto Medium',
fontSize: 12.0,
color: Color(0x99000000),
letterSpacing: 0.4,
),
);
final passwordPaddingInfo = const EdgeInsets.only(top: 15.0, bottom:15.0,
left: 22.0, right:25.0);
this._passwordField = AdministrationComponents.
buildTextFormField('passwordField', validatePassword,
(value) => _password = value, passwordDecoration, passwordPaddingInfo,
null, null, controller:_passwordController,
obscureField: !_passwordVisible);
asked Jan 3 at 5:56
topeolufetopeolufe
213
I'm working on a TextFormField to accept passwords. I have set the suffix icon to have IconButton child to detect on click events and to toggle the obscuretext attribute of the TextFormField. The callback function for the iconButton gets called but the TextFormField doesn't get repainted. Any ideas on how to solve this?
static Widget buildTextFormField(String id,
FormFieldValidator<String> validateField,
FormFieldSetter<String> saveField,
InputDecoration decoration,
EdgeInsetsGeometry paddingInfo,
EdgeInsetsGeometry marginInfo,
TextInputType keyboardType,
{bool obscureField:false, double width:328.0,
TextEditingController controller}
){
return Container(
padding: paddingInfo,
margin: marginInfo,
width: width,
child: TextFormField(
key: Key(id),
obscureText: obscureField,
validator: validateField,
onSaved: saveField,
keyboardType: keyboardType,
decoration: decoration,
controller: controller,
),
);
}
InputDecoration passwordDecoration = InputDecoration(
hintText: 'Password',
labelText: 'Enter your password',
suffixIcon:
IconButton(
icon: Icon(
_passwordVisible ? Icons.visibility : Icons.visibility_off,
semanticLabel: _passwordVisible ? 'hide password' : 'show password',
),
onPressed: () {
setState(() {
_passwordVisible ^= true;
//print("Icon button pressed! state: $_passwordVisible"); //Confirmed that the _passwordVisible is toggled each time the button is pressed.
});
}),
labelStyle: TextStyle(
fontFamily: 'Roboto Medium',
fontSize: 12.0,
color: Color(0x99000000),
letterSpacing: 0.4,
),
);
final passwordPaddingInfo = const EdgeInsets.only(top: 15.0, bottom:15.0,
left: 22.0, right:25.0);
this._passwordField = AdministrationComponents.
buildTextFormField('passwordField', validatePassword,
(value) => _password = value, passwordDecoration, passwordPaddingInfo,
null, null, controller:_passwordController,
obscureField: !_passwordVisible);
asked Jan 3 at 5:56
topeolufetopeolufe
213
asked Jan 3 at 5:56
topeolufetopeolufe
213
edited Jan 3 at 6:40
topeolufe
asked Jan 3 at 5:56
topeolufetopeolufe
213
asked Jan 3 at 5:56
topeolufetopeolufe
213
asked Jan 3 at 5:56
topeolufetopeolufe
213
213
1
Please update your question adding the code instead of the image.
– diegoveloper
Jan 3 at 5:58
@diegoveloper please see update. Thanks!
– topeolufe
Jan 3 at 6:14
is your password visible when you press the eye-Icon ? what's the issue? paste your build method
– diegoveloper
Jan 3 at 6:21
Are you calling the buildTextFormField in your build() method ?
– Shyju Madathil
Jan 3 at 6:22
@diegoveloper No, it not visible when I press the IconButton. However, I see that the value of _passwordVisible toggles when the button is pressed.
– topeolufe
Jan 3 at 6:23
|
show 4 more comments
1
Please update your question adding the code instead of the image.
– diegoveloper
Jan 3 at 5:58
@diegoveloper please see update. Thanks!
– topeolufe
Jan 3 at 6:14
is your password visible when you press the eye-Icon ? what's the issue? paste your build method
– diegoveloper
Jan 3 at 6:21
Are you calling the buildTextFormField in your build() method ?
– Shyju Madathil
Jan 3 at 6:22
@diegoveloper No, it not visible when I press the IconButton. However, I see that the value of _passwordVisible toggles when the button is pressed.
– topeolufe
Jan 3 at 6:23
1
1
Please update your question adding the code instead of the image.
– diegoveloper
Jan 3 at 5:58
Please update your question adding the code instead of the image.
– diegoveloper
Jan 3 at 5:58
@diegoveloper please see update. Thanks!
– topeolufe
Jan 3 at 6:14
@diegoveloper please see update. Thanks!
– topeolufe
Jan 3 at 6:14
is your password visible when you press the eye-Icon ? what's the issue? paste your build method
– diegoveloper
Jan 3 at 6:21
is your password visible when you press the eye-Icon ? what's the issue? paste your build method
– diegoveloper
Jan 3 at 6:21
Are you calling the buildTextFormField in your build() method ?
– Shyju Madathil
Jan 3 at 6:22
Are you calling the buildTextFormField in your build() method ?
– Shyju Madathil
Jan 3 at 6:22
@diegoveloper No, it not visible when I press the IconButton. However, I see that the value of _passwordVisible toggles when the button is pressed.
– topeolufe
Jan 3 at 6:23
@diegoveloper No, it not visible when I press the IconButton. However, I see that the value of _passwordVisible toggles when the button is pressed.
– topeolufe
Jan 3 at 6:23
|
show 4 more comments
2 Answers
2
active
oldest
votes
1
Thanks @ShyjuM and @ diegoveloper! I see what I was doing wrong - I was calling the buildTextFormField in the constructor of my State class and not in the build method. Moving the call to buildTextFormField inside the build method fixed it. Thanks again for all of your help!
answered Jan 3 at 7:03
topeolufetopeolufe
213
add a comment |
0
You have some errors in your code.
Replace this :
_passwordVisible > Icons.visibility : Icons.visibility_off,
and
_passwordVisible ^= true;
By this:
_passwordVisible ? Icons.visibility : Icons.visibility_off,
and
_passwordVisible = !_passwordVisible;
answered Jan 3 at 6:28
diegoveloperdiegoveloper
14.7k12635
thanks for catching that. But it was actually a typo from me converting the image I originally posted to text. I have corrected it in the snippet above. and _passwordVisible ^= true; is equivalent to _passwordVisible = !_passwordVisible;
– topeolufe
Jan 3 at 6:45
I tested the code and it's working fine
– diegoveloper
Jan 3 at 6:48
thanks @diegoveloper for trying it out. I see what I was doing wrong - I was calling the buildTextFormField in the constructor of my State class and not in the build method. Moving the call to buildTextFormField inside the build method fixed it. Thanks again for all of your help!
– topeolufe
Jan 3 at 7:00
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54017024%2fshow-hide-passwords-in-flutters-textformfield%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Thanks @ShyjuM and @ diegoveloper! I see what I was doing wrong - I was calling the buildTextFormField in the constructor of my State class and not in the build method. Moving the call to buildTextFormField inside the build method fixed it. Thanks again for all of your help!
answered Jan 3 at 7:03
topeolufetopeolufe
213
add a comment |
1
Thanks @ShyjuM and @ diegoveloper! I see what I was doing wrong - I was calling the buildTextFormField in the constructor of my State class and not in the build method. Moving the call to buildTextFormField inside the build method fixed it. Thanks again for all of your help!
answered Jan 3 at 7:03
topeolufetopeolufe
213
add a comment |
1
1
1
Thanks @ShyjuM and @ diegoveloper! I see what I was doing wrong - I was calling the buildTextFormField in the constructor of my State class and not in the build method. Moving the call to buildTextFormField inside the build method fixed it. Thanks again for all of your help!
answered Jan 3 at 7:03
topeolufetopeolufe
213
Thanks @ShyjuM and @ diegoveloper! I see what I was doing wrong - I was calling the buildTextFormField in the constructor of my State class and not in the build method. Moving the call to buildTextFormField inside the build method fixed it. Thanks again for all of your help!
answered Jan 3 at 7:03
topeolufetopeolufe
213
answered Jan 3 at 7:03
topeolufetopeolufe
213
answered Jan 3 at 7:03
topeolufetopeolufe
213
answered Jan 3 at 7:03
topeolufetopeolufe
213
213
add a comment |
add a comment |
0
You have some errors in your code.
Replace this :
_passwordVisible > Icons.visibility : Icons.visibility_off,
and
_passwordVisible ^= true;
By this:
_passwordVisible ? Icons.visibility : Icons.visibility_off,
and
_passwordVisible = !_passwordVisible;
answered Jan 3 at 6:28
diegoveloperdiegoveloper
14.7k12635
thanks for catching that. But it was actually a typo from me converting the image I originally posted to text. I have corrected it in the snippet above. and _passwordVisible ^= true; is equivalent to _passwordVisible = !_passwordVisible;
– topeolufe
Jan 3 at 6:45
I tested the code and it's working fine
– diegoveloper
Jan 3 at 6:48
thanks @diegoveloper for trying it out. I see what I was doing wrong - I was calling the buildTextFormField in the constructor of my State class and not in the build method. Moving the call to buildTextFormField inside the build method fixed it. Thanks again for all of your help!
– topeolufe
Jan 3 at 7:00
add a comment |
0
You have some errors in your code.
Replace this :
_passwordVisible > Icons.visibility : Icons.visibility_off,
and
_passwordVisible ^= true;
By this:
_passwordVisible ? Icons.visibility : Icons.visibility_off,
and
_passwordVisible = !_passwordVisible;
answered Jan 3 at 6:28
diegoveloperdiegoveloper
14.7k12635
thanks for catching that. But it was actually a typo from me converting the image I originally posted to text. I have corrected it in the snippet above. and _passwordVisible ^= true; is equivalent to _passwordVisible = !_passwordVisible;
– topeolufe
Jan 3 at 6:45
I tested the code and it's working fine
– diegoveloper
Jan 3 at 6:48
thanks @diegoveloper for trying it out. I see what I was doing wrong - I was calling the buildTextFormField in the constructor of my State class and not in the build method. Moving the call to buildTextFormField inside the build method fixed it. Thanks again for all of your help!
– topeolufe
Jan 3 at 7:00
add a comment |
0
0
0
You have some errors in your code.
Replace this :
_passwordVisible > Icons.visibility : Icons.visibility_off,
and
_passwordVisible ^= true;
By this:
_passwordVisible ? Icons.visibility : Icons.visibility_off,
and
_passwordVisible = !_passwordVisible;
answered Jan 3 at 6:28
diegoveloperdiegoveloper
14.7k12635
You have some errors in your code.
Replace this :
_passwordVisible > Icons.visibility : Icons.visibility_off,
and
_passwordVisible ^= true;
By this:
_passwordVisible ? Icons.visibility : Icons.visibility_off,
and
_passwordVisible = !_passwordVisible;
answered Jan 3 at 6:28
diegoveloperdiegoveloper
14.7k12635
answered Jan 3 at 6:28
diegoveloperdiegoveloper
14.7k12635
answered Jan 3 at 6:28
diegoveloperdiegoveloper
14.7k12635
answered Jan 3 at 6:28
diegoveloperdiegoveloper
14.7k12635
14.7k12635
thanks for catching that. But it was actually a typo from me converting the image I originally posted to text. I have corrected it in the snippet above. and _passwordVisible ^= true; is equivalent to _passwordVisible = !_passwordVisible;
– topeolufe
Jan 3 at 6:45
I tested the code and it's working fine
– diegoveloper
Jan 3 at 6:48
thanks @diegoveloper for trying it out. I see what I was doing wrong - I was calling the buildTextFormField in the constructor of my State class and not in the build method. Moving the call to buildTextFormField inside the build method fixed it. Thanks again for all of your help!
– topeolufe
Jan 3 at 7:00
add a comment |
thanks for catching that. But it was actually a typo from me converting the image I originally posted to text. I have corrected it in the snippet above. and _passwordVisible ^= true; is equivalent to _passwordVisible = !_passwordVisible;
– topeolufe
Jan 3 at 6:45
I tested the code and it's working fine
– diegoveloper
Jan 3 at 6:48
thanks @diegoveloper for trying it out. I see what I was doing wrong - I was calling the buildTextFormField in the constructor of my State class and not in the build method. Moving the call to buildTextFormField inside the build method fixed it. Thanks again for all of your help!
– topeolufe
Jan 3 at 7:00
thanks for catching that. But it was actually a typo from me converting the image I originally posted to text. I have corrected it in the snippet above. and _passwordVisible ^= true; is equivalent to _passwordVisible = !_passwordVisible;
– topeolufe
Jan 3 at 6:45
thanks for catching that. But it was actually a typo from me converting the image I originally posted to text. I have corrected it in the snippet above. and _passwordVisible ^= true; is equivalent to _passwordVisible = !_passwordVisible;
– topeolufe
Jan 3 at 6:45
I tested the code and it's working fine
– diegoveloper
Jan 3 at 6:48
I tested the code and it's working fine
– diegoveloper
Jan 3 at 6:48
thanks @diegoveloper for trying it out. I see what I was doing wrong - I was calling the buildTextFormField in the constructor of my State class and not in the build method. Moving the call to buildTextFormField inside the build method fixed it. Thanks again for all of your help!
– topeolufe
Jan 3 at 7:00
thanks @diegoveloper for trying it out. I see what I was doing wrong - I was calling the buildTextFormField in the constructor of my State class and not in the build method. Moving the call to buildTextFormField inside the build method fixed it. Thanks again for all of your help!
– topeolufe
Jan 3 at 7:00
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54017024%2fshow-hide-passwords-in-flutters-textformfield%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Please update your question adding the code instead of the image.
– diegoveloper
Jan 3 at 5:58
@diegoveloper please see update. Thanks!
– topeolufe
Jan 3 at 6:14
is your password visible when you press the eye-Icon ? what's the issue? paste your build method
– diegoveloper
Jan 3 at 6:21
Are you calling the buildTextFormField in your build() method ?
– Shyju Madathil
Jan 3 at 6:22
@diegoveloper No, it not visible when I press the IconButton. However, I see that the value of _passwordVisible toggles when the button is pressed.
– topeolufe
Jan 3 at 6:23