How to separate suffixIcon for password visibility? If I press icon on field password it also does the same thing on field confirm password.

password visibility

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isObsecure = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Text Form Field'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextFormField(
                obscureText: isObsecure,
                decoration: InputDecoration(
                  hintText: 'Password',
                  suffixIcon: IconButton(
                    onPressed: () {
                      setState(() {
                        isObsecure = !isObsecure;
                      });
                    },
                    icon: Icon(
                      isObsecure ? Icons.visibility_off : Icons.visibility,
                    ),
                  ),
                ),
              ),
              TextFormField(
                obscureText: isObsecure,
                decoration: InputDecoration(
                  hintText: 'Confirm Password',
                  suffixIcon: IconButton(
                    onPressed: () {
                      setState(() {
                        isObsecure = !isObsecure;
                      });
                    },
                    icon: Icon(
                      isObsecure ? Icons.visibility_off : Icons.visibility,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}


Solution 1: reza

you have to define 2 flags. 1 for password visibility and 1 for confirm:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isObsecure = false;
  bool isConfirmObsecure = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Text Form Field'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextFormField(
                obscureText: isObsecure,
                decoration: InputDecoration(
                  hintText: 'Password',
                  suffixIcon: IconButton(
                    onPressed: () {
                      setState(() {
                        isObsecure = !isObsecure;
                      });
                    },
                    icon: Icon(
                      isObsecure ? Icons.visibility_off : Icons.visibility,
                    ),
                  ),
                ),
              ),
              TextFormField(
                obscureText: isConfirmObsecure,
                decoration: InputDecoration(
                  hintText: 'Confirm Password',
                  suffixIcon: IconButton(
                    onPressed: () {
                      setState(() {
                        isConfirmObsecure = !isConfirmObsecure;
                      });
                    },
                    icon: Icon(
                      isConfirmObsecure
                          ? Icons.visibility_off
                          : Icons.visibility,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}


Solution 2: Vishal_VE

///You can use the provider also to hide and visible the password icon. Hope this will work for you.

////This is my forgot password screen

import 'package:flutter/material.dart';
import 'package:form_field_validator/form_field_validator.dart';
import 'package:provider/provider.dart';
import 'package:traveling/Provider/common/ObscureTextState.dart';

import 'package:traveling/helpers/AppColors.dart';
import 'package:traveling/helpers/AppStrings.dart';
import 'package:traveling/screens/Employee/home/BottomNavBar.dart';

class ForgotPasswordA extends StatefulWidget {
  @override
  _ForgotPasswordAState createState() =&gt; _ForgotPasswordAState();
}

class _ForgotPasswordAState extends State&lt;ForgotPasswordA&gt; {
  /// These variables are used for getting screen height and width
  double? _height;
  double? _width;
  ///controllers are used to get text which user enter in TextFiled
  TextEditingController confirmPasswordController = TextEditingController();
  TextEditingController passwordController = TextEditingController();
  GlobalKey&lt;FormState&gt; _formkey = GlobalKey();
  String? confirmPassword, password;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  ///this widget is the main widget and it is used for building a UI in the app

  @override
  Widget build(BuildContext context) {
    _height = MediaQuery.of(context).size.height;
    _width = MediaQuery.of(context).size.width;

    return Material(
      child: Scaffold(
        backgroundColor: AppColors.white,
        body:Consumer&lt;LoginProvider&gt;(
            builder:(context, obs, child) {
              ///Consumer is used to get value from the loginProvider class
              return GestureDetector(
                onTap: () {
                  FocusScope.of(context).unfocus();
                },
                child: Container(
                  height: _height,
                  width: _width,
                  margin: EdgeInsets.only(top: 70),
                  padding: EdgeInsets.only(bottom: 5),
                  child: SingleChildScrollView(
                    child: Column(
                      children: &lt;Widget&gt;[
                        SizedBox(height: _height! / 22),
                        appText(),
                        SizedBox(height: _height! / 18),
                        Container(
                          width: _width! * .85,
                          child: Form(
                            ///define global key for validation
                            key: _formkey,
                            autovalidateMode: AutovalidateMode.onUserInteraction,
                            child: Column(
                              children: &lt;Widget&gt;[
                                SizedBox(height: _height! / 50),
                                TextFormField(
                                  controller: passwordController,
                                  validator: (value) {
                                    if (value!.isEmpty) {
                                      return &quot;Please Enter Password!&quot;;
                                    } else if (value.length &lt; 6) {
                                      return &quot;Please Enter more than 6 digit .&quot;;
                                    } else {
                                      return null;
                                    }
                                  },
                                  obscureText:
                                  Provider.of&lt;LoginProvider&gt;(context, listen: false)
                                      .isTrue,
                                  keyboardType: TextInputType.emailAddress,
                                  autofillHints: [AutofillHints.email],
                                  cursorColor: AppColors.black,
                                  style: TextStyle(
                                    color: Color(0xff919AAA),
                                  ),
                                  decoration: InputDecoration(
                                    border: OutlineInputBorder(
                                      borderRadius: BorderRadius.circular(25.0),
                                      borderSide: BorderSide(
                                        color: AppColors.textFieldColor,
                                      ),
                                    ),
                                    focusedBorder: OutlineInputBorder(
                                      borderRadius: BorderRadius.circular(25.0),
                                      borderSide: BorderSide(
                                        color: AppColors.textFieldColor,
                                      ),
                                    ),
                                    errorBorder: OutlineInputBorder(
                                      borderRadius: BorderRadius.circular(25.0),
                                      borderSide: BorderSide(
                                        color: AppColors.red,
                                      ),
                                    ),
                                    focusedErrorBorder: OutlineInputBorder(
                                      borderRadius: BorderRadius.circular(25.0),
                                      borderSide: BorderSide(
                                        color: AppColors.red,
                                      ),
                                    ),
                                    enabledBorder: OutlineInputBorder(
                                      borderRadius: BorderRadius.circular(25.0),
                                      borderSide: BorderSide(
                                        color: AppColors.textFieldColor,
                                      ),
                                    ),
                                    floatingLabelBehavior: FloatingLabelBehavior.never,
                                    suffixIcon: IconButton(
                                      onPressed: () {
                                        Provider.of&lt;LoginProvider&gt;(context, listen: false)
                                            .toggleObs();
                                      },
                                      icon: Provider.of&lt;LoginProvider&gt;(context,
                                          listen: false)
                                          .switchObsIcon,
                                    ),
                                    labelText: 'Password',
                                    errorStyle: TextStyle(color: AppColors.red),
                                    hintStyle: TextStyle(
                                      color: Color(0xff919AAA),
                                    ),
                                  ),
                                ),
                                //passwordTextFormField(),
                                SizedBox(height: _height! / 30.0),
                                ///password visibility handle by provider state management

                                TextFormField(
                                  controller: confirmPasswordController,
                                  validator: (value) {
                                    if (value!.isEmpty) {
                                      return &quot;Please Enter Password!&quot;;
                                    } else if (value.length &lt; 6) {
                                      return &quot;Please Enter more than 6 digit .&quot;;
                                    } else {
                                      return null;
                                    }
                                  },
                                  obscureText:
                                  Provider.of&lt;LoginProvider&gt;(context, listen: false)
                                      .isConfirmPassword,
                                  keyboardType: TextInputType.emailAddress,
                                  autofillHints: [AutofillHints.email],
                                  cursorColor: AppColors.black,
                                  style: TextStyle(
                                    color: Color(0xff919AAA),
                                  ),
                                  decoration: InputDecoration(
                                    border: OutlineInputBorder(
                                      borderRadius: BorderRadius.circular(25.0),
                                      borderSide: BorderSide(
                                        color: AppColors.textFieldColor,
                                      ),
                                    ),
                                    focusedBorder: OutlineInputBorder(
                                      borderRadius: BorderRadius.circular(25.0),
                                      borderSide: BorderSide(
                                        color: AppColors.textFieldColor,
                                      ),
                                    ),
                                    errorBorder: OutlineInputBorder(
                                      borderRadius: BorderRadius.circular(25.0),
                                      borderSide: BorderSide(
                                        color: AppColors.red,
                                      ),
                                    ),
                                    focusedErrorBorder: OutlineInputBorder(
                                      borderRadius: BorderRadius.circular(25.0),
                                      borderSide: BorderSide(
                                        color: AppColors.red,
                                      ),
                                    ),
                                    enabledBorder: OutlineInputBorder(
                                      borderRadius: BorderRadius.circular(25.0),
                                      borderSide: BorderSide(
                                        color: AppColors.textFieldColor,
                                      ),
                                    ),
                                    floatingLabelBehavior: FloatingLabelBehavior.never,
                                    suffixIcon: IconButton(
                                      onPressed: () {
                                        Provider.of&lt;LoginProvider&gt;(context, listen: false)
                                            .toggleObsData();
                                      },
                                      icon: Provider.of&lt;LoginProvider&gt;(context,
                                          listen: false)
                                          .switchObsIcons,
                                    ),
                                    labelText: 'Confirm Password',
                                    errorStyle: TextStyle(color: AppColors.red),
                                    hintStyle: TextStyle(
                                      color: Color(0xff919AAA),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        SizedBox(height: _height! / 28),
                        SizedBox(height: _height! / 22),
                        submitButton(),
                        SizedBox(height: _height! / 35),
                      ],
                    ),
                  ),
                ),
              );}
        ),
      ),
    );
  }

  ///app-text Widget is used for app logo and icon in top side

  Widget appText() {
    return Container(
      width: _width! * 0.90,
      child: Column(
        children: &lt;Widget&gt;[
          Image.asset(
            &quot;assets/traveling-text-icon.png&quot;,
            height: 60,
          ),
          SizedBox(
            height: 5,
          ),
        ],
      ),
    );
  }

  ///for validation we used a submit button

  Widget submitButton() {
    return Card(
      elevation: 20.0,
      shadowColor: Colors.blue[100],
      shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(20.0))),
      child: Container(
        height: 60,
        width: _width! * .85,
        decoration: BoxDecoration(
          // boxShadow: [BoxShadow(color: AppColors.grey, blurRadius: 20.0)],
            borderRadius: BorderRadius.circular(20.0),
            gradient: LinearGradient(colors: [
              AppColors.blue,
              Colors.blue.shade900,
            ])),
        child: MaterialButton(
          onPressed: () {
            if(passwordController.text==confirmPasswordController.text){
              Navigator.pushReplacement(context,
                  MaterialPageRoute(builder: (context) =&gt; EmployeeBottomNavBar()));}
            else{
              print(&quot;password did not match&quot;);
            }
          },
          child: Text(
            AppStrings.submit,
            style: TextStyle(
                color: Colors.white, fontSize: 14, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

////provider class import 'package:flutter/material.dart'; import 'package:traveling/helpers/AppColors.dart';

class LoginProvider extends ChangeNotifier { bool _isTrue = true; bool _isConfirmPassword = true; bool get isTrue => _isTrue; bool get isConfirmPassword => _isConfirmPassword;

get switchObsIcons { return _isConfirmPassword ? Icon(Icons.visibility_off,color: AppColors.textFieldTextColor,) : Icon(Icons.visibility,color: AppColors.textFieldTextColor,); }

get switchObsIcon { return _isTrue ? Icon(Icons.visibility_off,color: AppColors.textFieldTextColor,) : Icon(Icons.visibility,color: AppColors.textFieldTextColor,); } void toggleObsData() { _isConfirmPassword = !_isConfirmPassword; notifyListeners(); } void toggleObs() { _isTrue = !_isTrue; notifyListeners(); } }