I want to implement password show/hide functionality in a TextFormField in Flutter, but it’s not working. I usually use this method to achieve it, but it’s not working here. How can I fix the dead code error?
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:ionicons/ionicons.dart';
import 'package:xray_classifier_tb/screens/splashScreen.dart';
import 'package:xray_classifier_tb/theme/TextStyles.dart';
import 'package:xray_classifier_tb/theme/colors.dart';
import 'package:xray_classifier_tb/widgets/appButtons.dart';
import 'package:xray_classifier_tb/widgets/textFormFields.dart';
class LoginApp extends StatefulWidget {
const LoginApp({super.key});
@override
State<LoginApp> createState() => _LoginAppState();
}
class _LoginAppState extends State<LoginApp> {
@override
Widget build(BuildContext context) {
bool isVisible = false;
TextEditingController emailController = TextEditingController();
TextEditingController passwordController = TextEditingController();
Size size = MediaQuery.of(context).size;
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
systemNavigationBarColor: backgroundColor,
systemNavigationBarIconBrightness: Brightness.dark));
return Scaffold(
appBar: AppBar(
backgroundColor: backgroundColor,
leading: Padding(
padding: const EdgeInsets.only(top: 15.0),
child: IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const splashScreen()));
},
icon: const Icon(
Ionicons.arrow_back,
color: iconColor,
)),
),
actions: []),
body: Container(
width: double.infinity,
height: double.infinity,
color: backgroundColor,
child: Stack(
alignment: Alignment.topCenter,
children: [
Column(mainAxisAlignment: MainAxisAlignment.center, children: [
Text(
'Tuberculosis Detection nUsing Deep Learning',
style: titleStyle.copyWith(fontSize: size.width * 0.04),
textAlign: TextAlign.center,
),
SizedBox(
width: size.width * 0.4,
child: Image.asset('assets/images/lungs_magnifying.png')),
Text(
'Welcome',
style: titleStyle.copyWith(fontSize: size.width * 0.05),
),
SizedBox(
height: size.height * .02,
),
Container(
width: size.width * 0.7,
decoration: BoxDecoration(
color: txtfieldclr,
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.only(left: 6.0),
child: TextFormField(
controller: emailController,
decoration: const InputDecoration(
prefixIcon: Icon(
Ionicons.mail,
color: iconColor,
),
hintText: 'Email',
hintStyle:
TextStyle(color: Color.fromARGB(255, 59, 59, 59)),
border: InputBorder.none),
),
),
),
SizedBox(
height: size.height * 0.02,
),
Container(
width: size.width * 0.7,
decoration: BoxDecoration(
color: txtfieldclr,
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.only(left: 6.0),
child: TextFormField(
controller: passwordController,
decoration: InputDecoration(
suffixIcon: Padding(
padding: EdgeInsets.only(left: 12),
child: IconButton(
icon: Icon(
isVisible ? Ionicons.eye : Ionicons.eye_off),//this is where the issue is Ionicon.eye is dead code although it shouldn't be
onPressed: () {
setState(() {
isVisible = !isVisible;
});
},
color: iconColor,
),
),
prefixIcon: Icon(Ionicons.key, color: iconColor),
hintText: 'Password',
hintStyle:
TextStyle(color: Color.fromARGB(255, 59, 59, 59)),
border: InputBorder.none),
obscureText: !isVisible,
),
),
),
SizedBox(
height: size.height * .005,
),
forgotbtn(
onPressed: () {},
),
SizedBox(
height: size.height * .02,
),
primarybtn(
onPressed: () {},
txtBtn: 'login',
containerColor:
containerBtn,
ShadowColor: Color.fromARGB(255, 134, 175, 128),
btntxtStyle: btntxtStyle2),
]),
],
),
),
);
}
}
in the below code snippet, the same code works fine
TextField(
controller: controllerPassword,
cursorHeight: 15,
style: TextStyle(height: 1),
obscureText: !isPasswordVisible,
decoration: InputDecoration(
suffixIcon: TextButton(
child: Padding(
padding: EdgeInsets.only(left: 12),
child: Icon(
isPasswordVisible
? FontAwesomeIcons.eye
: FontAwesomeIcons.eyeSlash,
color: emeraldGreen,
),
),
onPressed: () {
setState(() {
isPasswordVisible =
!isPasswordVisible;
});
},
),
label: const Text('Password'),
labelStyle: secondarytxt,
focusColor: purpleColor,
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(
width: 1, color: purpleColor)),
enabledBorder: const OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10)),
),
)),
i have tried some ways to fix it but its not working it shows deadcode no matter what
its a logical error but i can’t seem to figure out where is it
2
Answers
ok, there is a common mistake we all made at the begin of knowing flutter, when you need to change some thing in the presented UI you call
setState(), which directly make the framework call the build method again and again to rebuild your UI.at this point you realize that, you shouldn’t declare UI control variable in the build method.
like what you have did:
each time you
setState(), you create a new variable calledisVisiblewith boolean value equal to false.(
isVisiblealways false).rather than doing that, you shoud move that variables to be class members:
remove bool isVisible = false; and declare outside of the build method