Hide Show Password Icon Input Field
Complete Code For Hide Show Password Icon Input Field In Flutter
main.dart
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() => MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
bool passwordVisible = false;
@override
void initState() {
passwordVisible = false;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue[900],
title: Text("Hide Show Password Icon Input Field"),
),
body: Column(
children: <Widget>[
_buildPasswordTextField(),
],
),
);
}
Widget _buildPasswordTextField() {
return Padding(
padding: const EdgeInsets.all(15.0),
child: Container(
child: TextFormField(
keyboardType: TextInputType.text,
obscureText: passwordVisible,
decoration: InputDecoration(
labelText: 'Password',
hintText: 'Enter your password',
// Here is key idea
suffixIcon: IconButton(
icon: Icon(
passwordVisible
? Icons.visibility
: Icons.visibility_off,
color: Theme.of(context).primaryColorDark,
),
onPressed: () {
setState(() {
passwordVisible = !passwordVisible;
});
},
),
),
),
),
);
}
}