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.