skip to Main Content
import 'package:flutter/material.dart';

class SignUpPage extends StatefulWidget {
  const SignUpPage({super.key});

  @override
  State<SignUpPage> createState() => _SignUpPageState();
}

class _SignUpPageState extends State<SignUpPage> {

  bool oT = true;//obscure-text for password
  

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          decoration: const BoxDecoration(
            color: Colors.white
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text("Welcome Back",
                style: TextStyle(
                  color: Colors.black,
                  fontStyle: FontStyle.normal,
                  fontFamily: "nunito",
                  fontWeight: FontWeight.bold,
                  fontSize: 30,
                ),
              ),
              const Text("House Hunting, Simplified",
                style: TextStyle(
                  fontSize: 15,
                  fontFamily: "nunito",
                  fontWeight: FontWeight.w200,
                  fontStyle: FontStyle.normal,
                  color: Colors.black
                ),
              ),
              const Padding(padding: EdgeInsets.only(top: 20)),
              Container(
                height: 50,
                width: 320,
                decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(15)),
                  color: Colors.white,
                  border: Border(
                    top: BorderSide(color: Colors.black),
                    right: BorderSide(color: Colors.black),
                    bottom: BorderSide(color: Colors.black),
                    left: BorderSide(color: Colors.black)
                  ),
                ),
                child: const TextField(
                  decoration: InputDecoration(
                    prefixIcon: Icon(Icons.person_outline_rounded,
                      color: Colors.black,
                    ),
                    hintText: "Enter Your UserName",
                    border: InputBorder.none,
                  ),
                ),
              ),
              Container(
                height: 50,
                width: 320,
                margin: const EdgeInsets.only(top: 10),
                decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(15)),
                  color: Colors.white,
                  border: Border(
                      top: BorderSide(color: Colors.black),
                      right: BorderSide(color: Colors.black),
                      bottom: BorderSide(color: Colors.black),
                      left: BorderSide(color: Colors.black)
                  ),
                ),
                child: const TextField(
                  decoration: InputDecoration(
                    prefixIcon: Icon(Icons.password_rounded,
                      color: Colors.black,
                    ),
                    suffixIcon: Padding(
                      padding: EdgeInsets.zero,
                      child: Icon(Icons.remove_red_eye_outlined,
                        color: Colors.black,
                      ),
                    ),
                    hintText: "Enter Your Password",
                    border: InputBorder.none,
                  ),
                  obscureText: oT,

                ),
              ),
            ],
          ),
        )
      ),
    );
  }
}

Moreover error is shown in obscureText parameter.

2

Answers


  1. Add a GestureDetector to change the oT value while suffixIcon clicked

    suffixIcon: GestureDetector(
      onTap: () {
        setState(() {
          oT = !oT;
        });
      },
      child: Padding(
        padding: EdgeInsets.zero,
        child: Icon(Icons.remove_red_eye_outlined,
          color: Colors.black,
        ),
      ),
    ),
    
    Login or Signup to reply.
  2. Your TextField should not be const when you are using variables in it. This should work:

              TextField(
                decoration: const InputDecoration(
                  prefixIcon: Icon(
                    Icons.password_rounded,
                    color: Colors.black,
                  ),
                  suffixIcon: Padding(
                    padding: EdgeInsets.zero,
                    child: Icon(
                      Icons.remove_red_eye_outlined,
                      color: Colors.black,
                    ),
                  ),
                  hintText: "Enter Your Password",
                  border: InputBorder.none,
                ),
                obscureText: oT,
              )
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search