show_hide_password

Description:

show hide password

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
copied to clipboard
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';
copied to clipboard

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
);
}
)
copied to clipboard
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,
)
copied to clipboard




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();
copied to clipboard
ShowHidePasswordTextField(
controller: controller,
)
copied to clipboard

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),
),
),
)
copied to clipboard




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.