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

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

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

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.