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; }); }, ), ), ), ), ); } }