Password visibility icon appearing when it should not be displayed

Asked

Viewed 58 times

0

I am making a login screen and in it I will leave the option to make visible or not the password.
I already have everything set up, but for some reason a second button appears that I did not create. I can’t identify where it’s generated from and why.
I wonder if there is some code behind (maybe in widgets) which automatically creates the button, and if there is how to configure to remove it.

Widget _buildPasswordTF() {
    return

      Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          'Senha',
          style: kLabelStyle,
        ),
        SizedBox(height: 10.0),
        Container(
          alignment: Alignment.centerLeft,
          decoration: kBoxDecorationStyle,
          height: 60.0,
          child: TextFormField(
            validator: (input) => input!.length <3
                ? "Senha muito curta"
                :null,
            obscureText: hidePassword,
            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,
                ),
              suffixIcon: IconButton(
                onPressed:(){
                  setState(() {
                    hidePassword = !hidePassword;
                  });
                },
                color: Colors.white.withOpacity(0.4),
                icon: Icon (hidePassword? Icons.visibility_off: Icons.visibility)
              ),
              hintText: 'Digite sua Senha',
              hintStyle: kHintTextStyle,
            ),
          ),
        ),
      ],
    );
  }

Here’s the part where I create the screen:

@override
  Widget build(BuildContext context) {

    return Scaffold(
      key: scaffoldKey,
      body: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle.light,
        child: GestureDetector(
          onTap: () => FocusScope.of(context).unfocus(),
          child: Stack(
            children: <Widget>[
              Container(
                height: double.infinity,
                width: double.infinity,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      Color(0xFF9A73F5),
                      Color(0xFF8761F1),
                      Color(0xFF7047E0),
                      Color(0xFF5339E5),
                    ],
                    stops: [0.1, 0.4, 0.7, 0.9],
                  ),
                ),
              ),
              Form(
                key: globalFormKey,

                child: SingleChildScrollView(
                  physics: AlwaysScrollableScrollPhysics(),
                  padding: EdgeInsets.symmetric(
                    horizontal: 40.0,
                    vertical: 120.0,
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        'WT Cloud',
                        style: TextStyle(
                          color: Colors.white,
                          fontFamily: 'OpenSans',
                          fontSize: 30.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 30.0),
                      _buildEmailTF(),
                      SizedBox(
                        height: 30.0,
                      ),
                      _buildPasswordTF(),
                      _buildForgotPasswordBtn(),
                     // _buildRememberMeCheckbox(),
                      _buildLoginBtn(),
                      _buildSignupBtn(),
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

exemplo da tela

  • 1

    Looking through the code, I couldn’t see anything that would make this icon appear, but just running the code to debug it better. Can you post a complete snippet that you can copy and paste to reproduce? (like a main() calling runApp with a screen that has only the Textfield of the password - the snippets you posted have several constants and things defined elsewhere, which does not allow you to simply pick up and run).

  • import 'package:flutter/material.Dart'; const primaryColor = Colors.deepPurple; const secondaryColor = Colors.deepPurpleAccent; const bgcolor = Color(0xF212332); const defaultPadding = 16.0; final kHTextStyle = Textstyle(&#xA;color: Colors.purpleAccent,&#xA;fontFamily: 'OpenSans',&#xA;);final kLabelStyle = TextStyle(&#xA;color: Colors.white,&#xA;fontWeight: FontWeight.bold,&#xA;fontFamily: 'OpenSans',);&#xA;final kBoxDecorationStyle = BoxDecoration(color: Color(0xFF6CA8F1),borderRadius: Borderradius.circular(10.0),boxShadow: [Boxshadow(color: Colors.black12,blurRadius: 6.0,offset: Offset(0, 2),),],);

  • void main() { runApp(Myapp()); } class Myapp extends Statelesswidget { // This widget is the root of your application. @override Widget build(Buildcontext context) {&#xA; return MaterialApp(&#xA; debugShowCheckedModeBanner: false,&#xA; title: 'WSPro Painel',&#xA; theme: ThemeData.dark().copyWith(&#xA; scaffoldBackgroundColor: bgColor,&#xA; textTheme: GoogleFonts.poppinsTextTheme&#xA; (Theme.of(context).textTheme) .apply(bodyColor: Colors.white), canvascolor: secondaryColor, ), home: Login() ); }}

  • just add these two codes

  • I realized that it only appears in the web version

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.