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.
License
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
Files:
Customer Reviews
There are no reviews.
