As a Beginner in flutter I have made my first log in form in flutter but the only problem is I don't know how to hide/show password in flutter I have copy Hide/show password code in the internet but I got error several times I don't know how is the proper way to execute the code Kindly Help me and here's my code given Below.

import 'package:flutter/material.dart';

    class LogInForm extends StatelessWidget {
      const LogInForm({Key? key}) : super(key: key);
      
    
      @override
      
      Widget build(BuildContext context) {
        return Scaffold(
            body: Container(
          height: MediaQuery.of(context).size.height,
          width: double.infinity,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Expanded(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Column(
                        children: <Widget>[
                          Text(
                            "Welcome",
                            style: TextStyle(
                                fontSize: 50, fontWeight: FontWeight.bold),
                          ),
                          SizedBox(
                            height: 30,
                          ),
                          Text(
                            "Login to your account",
                            style: TextStyle(fontSize: 25, color: Colors.grey[700]),
                          )
                        ],
                      ),
                      
                      Container(
                          margin: EdgeInsets.fromLTRB(200, 100, 200, 0),
                          child: TextField(
                            decoration: InputDecoration(
                                border: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(30.0),
                                ),
                                labelText: 'Username',
                                labelStyle: TextStyle(
                                  fontFamily: 'Roboto',
                                  fontWeight: FontWeight.bold,
                                )),
                          )),
                      Container(
                          margin: EdgeInsets.fromLTRB(200, 1, 200, 10),
                          child: TextFormField(
                            decoration: InputDecoration(
                                border: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(30.0),
                                ),
                                labelText: 'Password',
                                labelStyle: TextStyle(
                                  fontFamily: 'Roboto',
                                  fontWeight: FontWeight.bold,
                                )),
                          )),
                          
                  
                      MaterialButton(
                        minWidth: double.tryParse('500'),
                        height: 50,
                        onPressed: () {},
                        color: Color.fromARGB(255, 6, 122, 204),
                        elevation: 0,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(20.0),
                        ),
                        child: Text(
                          "Login",
                          style: TextStyle(
                            fontWeight: FontWeight.w600,
                            fontSize: 18,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ]),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text("Don't have an account?"),
                  Text(
                    " Register",
                    style: TextStyle(
                      fontWeight: FontWeight.w600,
                      fontSize: 18,
                    ),
                  )
                ],
              ),
            ],
          ),
        ));
      }

}

CodePudding user response：

You can use obscureText in TextField like this.

bool _passVisibility = true;
TextEditingController passwordCon = TextEditingController();


Widget _passwordWidget() {
    return TextField(
  key: Key('password-input'),
  textInputAction: TextInputAction.done,
  keyboardType: TextInputType.visiblePassword,
  controller: passwordCon,
  autofocus: false,
  obscureText: _passVisibility,

  decoration: InputDecoration(
      labelText: //your labelText
      hintText: //your hintText
      border: OutlineInputBorder(
        borderRadius:
            BorderRadius.circular(10.0),
        borderSide: BorderSide(
          color: Colors.amber,
        ),
      ),
      suffixIcon: IconButton(
        icon: _passVisibility
            ? Icon(Icons.visibility_off)
            : Icon(Icons.visibility),
        onPressed: () {
          _passVisibility = !_passVisibility;

          setState(() {});
        },
      )),
);
  }

CodePudding user response：

Just simply make obscureText : True in TextForm Field that's it. Thanks.