abuanwar072/Welcome-Login-Signup-Page-Flutter

Rounded password field

Sharath-prsnl opened this issue · 2 comments

The rounded password field has a password hide and show icon whick doesn't work. Can you suggest some ways to make it function.

Same question i have been struggling with the same issue

Same question i have been struggling with the same issue

I got the solution.
You have to modify the lib/components/rounded_password_field.dart a bit.
change the roundedpassword a statefulclass.
create a boolian variable inside _RoundedPasswordFieldState
bool _passwordVisible=false;
change the value of suffixbutton attribute.
after all edits the rounded_password_field.dart looks like the one below.
`import 'package:flutter/material.dart';
import 'package:flutter_auth/components/text_field_container.dart';
import 'package:flutter_auth/constants.dart';

class RoundedPasswordField extends StatefulWidget {
final ValueChanged onChanged;
const RoundedPasswordField({
Key key,
this.onChanged, IconData suffixIcon,
}) : super(key: key);

@OverRide
_RoundedPasswordFieldState createState() => _RoundedPasswordFieldState();
}

class _RoundedPasswordFieldState extends State {
bool _passwordVisible=false;

@OverRide
Widget build(BuildContext context) {
return TextFieldContainer(
child: TextFormField(
keyboardType: TextInputType.text,
obscureText: !_passwordVisible,
onChanged: widget.onChanged,
cursorColor: kPrimaryColor,
decoration: InputDecoration(
hintText: "Enter your Password",
icon: Icon(
Icons.lock,
color: kPrimaryColor,
),
suffixIcon: IconButton(
icon: Icon(_passwordVisible ? Icons.visibility : Icons.visibility_off),
color: kPrimaryColor,
onPressed: () {
setState(() {
_passwordVisible = !_passwordVisible;
});
},

      ),
      border: InputBorder.none,
    ),
  ),
);

}
}`