I'm having issues trying to convert my StatelessWidget code..why?

Viewed 90

I was trying to code a stateful widget on a statelessWidget class to put a bool and a stateState((), (show or hide password). So I followed some post which said that the solution is to convert.

I converted my class and I have some errors, maybe I should update my code but I don't know how to do that and I'm always getting errors like this:

36:32: Error: The setter '_isSecret' isn't defined for the class '_RoundedPasswordFieldState'. -'_RoundedPasswordFieldState' is from 'package:yona/Login/Components/rounded_password_field.dart' ('lib/Login/Components/rounded_password_field.dart'). Try correcting the name to the name of an existing setter, or defining a setter or field named '_isSecret'.

Can you help me please ? The problem is resolved, this is the new code

class _RoundedPasswordFieldState extends State<RoundedPasswordField> {
bool _isSecret = true;

@override
Widget build(BuildContext context) {
 return TextFieldContainer(
   child: TextFormField(
     obscureText: _isSecret,
     decoration: InputDecoration(
       hintText: "Password",
       border: InputBorder.none,
       icon: Icon(
         Icons.lock,
         color: DarkTurquoise,
       ),
       suffixIcon: InkWell(
         onTap: () =>
             setState(() => _isSecret = !_isSecret),
         child: Icon(!_isSecret
             ? Icons.visibility
             : Icons.visibility_off, color: DarkTurquoise),
       ),
     ),
   ),
 );
}
}
2 Answers

To access _isSecret, you need to use widget.:

class RoundedPasswordField extends StatefulWidget {
final ValueChanged<String> onChanged;

const RoundedPasswordField({
 required this.onChanged,
 Key? key,
}) : super(key: key);

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


class _RoundedPasswordFieldState extends State<RoundedPasswordField> {

bool _isSecret = true;

@override
Widget build(BuildContext context) {
 return TextFieldContainer(
   child: TextFormField(
     obscureText:_isSecret,
     decoration: InputDecoration(
       hintText: "Password",
       icon: Icon(
         Icons.lock,
         color: DarkTurquoise,
       ),
       suffixIcon: InkWell(
         onTap: () =>
             setState(() => _isSecret = !_isSecret),
         child: Icon(!_isSecret
             ? Icons.visibility
             : Icons.visibility_off),
       ),
     ),
   ),
 );
}
}

in setState you should change _isSecret to RoundedPasswordField._isSecret and the other problem is you are not calling onChanged.

working code:

class RoundedPasswordField extends StatefulWidget {
static bool _isSecret = true;
final ValueChanged<String> onChanged;

const RoundedPasswordField({
 required this.onChanged,
 Key? key,
}) : super(key: key);

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


class _RoundedPasswordFieldState extends State<RoundedPasswordField> {
@override
Widget build(BuildContext context) {
 return TextFieldContainer(
   child: TextFormField(
     obscureText: RoundedPasswordField._isSecret,
     onChanged: widget.onChanged,
     decoration: InputDecoration(
       hintText: "Password",
       icon: Icon(
         Icons.lock,
         color: DarkTurquoise,
       ),
       suffixIcon: InkWell(
         onTap: () =>
             setState(() => RoundedPasswordField._isSecret = !RoundedPasswordField._isSecret),
         child: Icon(!RoundedPasswordField._isSecret
             ? Icons.visibility
             : Icons.visibility_off),
       ),
     ),
   ),
 );
}
}

If you don't want to change _isSecret from outside of your widget then just use this code


class RoundedPasswordField extends StatefulWidget {
  final ValueChanged<String> onChanged;

  const RoundedPasswordField({
    required this.onChanged,
    Key? key,
  }) : super(key: key);

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

class _RoundedPasswordFieldState extends State<RoundedPasswordField> {
  bool _isSecret = true;
  @override
  Widget build(BuildContext context) {
    return TextFieldContainer(
      child: TextFormField(
        obscureText: _isSecret,
        onChanged: widget.onChanged,
        decoration: InputDecoration(
          hintText: "Password",
          icon: Icon(
            Icons.lock,
            color: DarkTurquoise,
          ),
          suffixIcon: InkWell(
            onTap: () => setState(() => _isSecret =
                !_isSecret),
            child: Icon(!_isSecret
                ? Icons.visibility
                : Icons.visibility_off),
          ),
        ),
      ),
    );
  }
}

Related