password widget

flutter_hbb/lib/common.dart

@@ -98,3 +98,43 @@ void msgbox(String type, String title, String text, BuildContext context,
             ),
           ]));
 }
+
+class PasswordWidget extends StatefulWidget {
+  PasswordWidget({Key key, this.controller}) : super(key: key);
+
+  final TextEditingController controller;
+
+  @override
+  _PasswordWidgetState createState() => _PasswordWidgetState();
+}
+
+class _PasswordWidgetState extends State<PasswordWidget> {
+  bool _passwordVisible = false;
+  @override
+  Widget build(BuildContext context) {
+    return TextFormField(
+      autofocus: true,
+      keyboardType: TextInputType.text,
+      controller: widget.controller,
+      obscureText: !_passwordVisible, //This will obscure text dynamically
+      decoration: InputDecoration(
+        labelText: 'Password',
+        hintText: 'Enter your password',
+        // Here is key idea
+        suffixIcon: IconButton(
+          icon: Icon(
+            // Based on passwordVisible state choose the icon
+            _passwordVisible ? Icons.visibility : Icons.visibility_off,
+            color: Theme.of(context).primaryColorDark,
+          ),
+          onPressed: () {
+            // Update the state i.e. toogle the state of passwordVisible variable
+            setState(() {
+              _passwordVisible = !_passwordVisible;
+            });
+          },
+        ),
+      ),
+    );
+  }
+}

flutter_hbb/lib/home_page.dart

@@ -82,6 +82,7 @@ class _HomePageState extends State<HomePage> {
                       // keyboardType: TextInputType.number,
                       decoration: InputDecoration(
                         labelText: 'Remote ID',
+                        hintText: 'Enter your remote ID',
                         border: InputBorder.none,
                         helperStyle: TextStyle(
                           fontWeight: FontWeight.bold,

flutter_hbb/lib/remote_page.dart

@@ -250,14 +250,7 @@ void enterPasswordDialog(String id, BuildContext context) {
       (setState) => Tuple3(
             Text('Please enter your password'),
             Column(mainAxisSize: MainAxisSize.min, children: [
-              TextField(
+              PasswordWidget(controller: controller),
-                autofocus: true,
-                obscureText: true,
-                controller: controller,
-                decoration: const InputDecoration(
-                  labelText: 'Password',
-                ),
-              ),
               CheckboxListTile(
                 controlAffinity: ListTileControlAffinity.leading,
                 title: Text(