show_hide_password

A Flutter plugin that provides a builder to easily implement a hide/show password functionality in your Flutter application. This plugin allows you to toggle the visibility of a password field with a simple boolean status. Additionally, it includes a Flutter Widget that provides a custom textfield widget with a built-in password toggle feature and customization options.

Platform Support

Android	iOS	Web	MacOS	Linux	Windows
✅	✅	✅	✅	✅	✅

Features

• Toggle between hiding and showing the password in a text field.
• You can customize the icon and size of the password visibility toggle.
• Supports for custom TextField, TextFormField or custom widgets.
• Provides a custom TextField with a built-in show/hide toggle.
• Can customize the appearance of the textfield and password toggle to match your app's design.

Installation

To use this plugin, add show_hide_password as a dependency in your pubspec.yaml file.

dependencies:
  show_hide_password: ^0.0.2

Run flutter pub get to install the package.

Usage

Import the package in your Dart code:

import 'package:show_hide_password/show_hide_password.dart';

ShowHidePassword

Use the ShowHidePassword widget in your widget tree:

ShowHidePassword(
    passwordField: (bool hidePassword){
      return  TextField(
        obscureText: hidePassword, ///use the hidePassword status on obscureText to toggle the visibility
      );
    }
)

You can customize the toogle and provide initial toggle boolean state. Here's an example of how to customize the toggle appearance:

ShowHidePassword(
  hidePassword: false,
  passwordField: (hidePassword){
      return  TextField(
        keyboardType: TextInputType.text,
        controller: controller,
        obscureText: hidePassword, ///use the hidePassword status on obscureText to toggle the visibility
        showCursor: false,
        decoration: InputDecoration(
          isDense: true,
          hintText: 'Enter the password',
          hintStyle: Theme.of(context).textTheme.labelMedium!.copyWith(
            color: Colors.black38,
            fontWeight: FontWeight.w500,
          ),
          enabledBorder: OutlineInputBorder(
            borderSide: const BorderSide(
                color: Colors.black12,
                width: 1
            ),
            borderRadius: BorderRadius.circular(12),
          ),
          focusedBorder: OutlineInputBorder(
            borderSide: const BorderSide(
                color: Colors.black38,
                width: 1
            ),
            borderRadius: BorderRadius.circular(12),
          ),
          counterText: "",
          contentPadding:EdgeInsets.symmetric(vertical: size.height*0.018,horizontal: size.width*0.04),
        ),
        style:  Theme.of(context).textTheme.labelMedium!.copyWith(
          color: Colors.black87,
          fontWeight: FontWeight.w500,
        ),
      );
  },
  iconSize: 18,
  visibleOffIcon: Iconsax.eye_slash,
  visibleOnIcon: Iconsax.eye,
)

Property	Type	Description
iconSize	double	Size of the toggle icon. Default: 20
hidePassword	bool	Inital boolean state of the toggle. Default: true
visibleOnIcon	IconData	An icon to display as the toggle when visibility ON
visibleOffIcon	IconData	An icon to display as the toggle when visibility OFF

ShowHidePasswordTextField

Use the ShowHidePasswordTextField widget in your widget tree:

TextEditingController controller = TextEditingController();

ShowHidePasswordTextField(
  controller: controller,
)

You can customize the appearance of the textfield and password toggle using various properties. Here's an example of how to customize the textfield's appearance:

ShowHidePasswordTextField(
  controller: controller,
  fontStyle: const TextStyle(
    fontSize: 14,
  ),
  textColor: Colors.blue,
  hintColor: Colors.lightBlueAccent,
  iconSize: 20,
  visibleOffIcon: Iconsax.eye_slash,
  visibleOnIcon: Iconsax.eye,
  decoration: InputDecoration(
    isDense: true,
    hintText: 'Enter the password',
    hintStyle: Theme.of(context).textTheme.labelMedium!.copyWith(
      color: Colors.black38,
      fontWeight: FontWeight.w500,
      fontSize: 12
    ),
    enabledBorder: OutlineInputBorder(
      borderSide: const BorderSide(
          color: Colors.black12,
          width: 1
      ),
      borderRadius: BorderRadius.circular(12),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: const BorderSide(
          color: Colors.black38,
          width: 1
      ),
      borderRadius: BorderRadius.circular(12),
    ),
  ),
)

Property	Type	Description
controller	TextEditingController	TextEditing Controller used to control text.
hintText	String	The hint text to display inside the text input field.
decoration	InputDecoration	To customize the apprearence of the TextField.
fontStyle	TextStyle	If non-null, the style to use for the text.
textColor	Color	Color for the text on TextField. Default: Colors.black87
hintColor	Color	Color for the hint text on TextField. Default: Colors.black38
iconSize	double	Size of the toggle icon. Default: 20
visibleOnIcon	IconData	An icon to display as the toggle when visibility ON.
visibleOffIcon	IconData	An icon to display as the toggle when visibility OFF.

Example

For a complete example of how to use this plugin, check out the example folder in this repository.

Issues and Feedback

If you encounter any issues or have suggestions for improvement, please open an issue on our GitHub repository. We welcome your feedback!

License

This project is licensed under the MIT License - see the LICENSE file for details.