GitHub repositorymaheshj01/passwordfield

passwordfield

A flutter package for the most commonly required widget password textfield. It has most of the features you would need in a password textfield

passwordfield project cover
Stars
14
Forks
5
Last push (UTC)
Oct 19, 2023
Project status
Active

Original README

English project snapshot. Visit GitHub for the latest content.

passwordfield: ^0.2.0

Pub

A simple and easy to use flutter package to add a passwordfield to your Flutter project.

Getting Started

Installation
  • Add the dependency
flutter pub add passwordfield
  • Import the package
import 'package:passwordfield/passwordfield.dart';
  • Voila! use the Widget
PasswordField();

Now Supports adding constraints on the Password

Screenshot from 2020-01-11 22-16-13

Example 1 Output
PasswordField(
  color: Colors.blue,
  passwordConstraint: r'.*[@$#.*].*',
  passwordDecoration: PasswordDecoration(),
  hintText: 'must have special characters',
  border: PasswordBorder(
    border: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.blue.shade100,
      ),
      borderRadius: BorderRadius.circular(12),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.blue.shade100,
      ),
      borderRadius: BorderRadius.circular(12),
    ),
    focusedErrorBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
      borderSide:
          BorderSide(width: 2, color: Colors.red.shade200),
    ),
  ),
  errorMessage:
      'must contain special character either . * @ # \$',
),

Screen-Recording-2021-09-18-at-9

Example 2 Output
PasswordField(
  backgroundColor: Colors.blue.withOpacity(0.2),
  errorMessage: '''
- A uppercase letter
- A lowercase letter
- A digit
- A special character
- A minimum length of 8 characters
 ''',
  hintText: 'Default password constraint ',
  passwordDecoration: PasswordDecoration(
    inputPadding: const EdgeInsets.symmetric(horizontal: 20),
  ),
  border: PasswordBorder(
    border: OutlineInputBorder(
        borderSide:
            const BorderSide(width: 0, color: Colors.grey),
        borderRadius: BorderRadius.circular(25.7)),
    focusedBorder: OutlineInputBorder(
      borderSide:
          const BorderSide(width: 0, color: Colors.grey),
      borderRadius: BorderRadius.circular(25.7),
    ),
    enabledBorder: OutlineInputBorder(
      borderSide:
          const BorderSide(width: 0, color: Colors.grey),
      borderRadius: BorderRadius.circular(25.7),
    ),
  ),
),

Screen-Recording-2021-09-18-at-1

More examples here 👈

Properties

bool autoFocus: if autofocus is true keyboard pops up as soon as the widget is rendered on screen defaults to false

Color backgroundColor Background Color for the textfield (defaults to white), By default the backgroundColor is based on the current [Theme].

PasswordBorder border: Border class for the passwordfield which provides borders for different states of the passwordfield e.g [enabledBorder],[border], [focusedBorder], [focusedErrorBorder]

TextEditingController controller: A controller for an editable passwordfield.

int errorMaxLines: Defaults to null, which means that the [errorText] will be limited to a single line with [TextOverflow.ellipsis]

String errorMessage: custom message to show if the input password does not match the pattern.

String floatingText: floatingText to show when floatingPlaceholder is true

hasFloatingPlaceholder: whether the placeholder can float to left top on focus, defaults to false

final String hintText: default text to show on the passwordfield when it is empty

PasswordDecoration passwordDecoration: Decoration class for the PasswordField to customize the input styling

int maxLength: the max number of characters the password field can support

Function onSubmit: function triggerred when the submit button on keyboard is pressed

Function onChanged: function triggerred when the password is changed in the passwordfield

String passwordConstraint: supports adding constraints to the Passwordfield by adding a regex pattern

You are welcome to contribute to this package, to contribute please read the contributing guidelines.

Mahesh Jamdade GitHub avatar
GitHub author

Mahesh Jamdade ↗

Refactor less, Ship more.

iVueitColumbus, OHOfficial website ↗
LanguagesDartC++CMakeHTMLSwiftCKotlinObjective-C

Categories

Dependencies used

Dependency list 3 items

  • flutter{"sdk":"flutter"}
  • flutter_testDevelopment{"sdk":"flutter"}
  • lintsDevelopment^2.0.1

How do I choose a repository?

Start with your use case, compare repository activity, and check the original project before adopting it.

  1. Search by repository name, owner or description, then narrow the results by topic.
  2. Compare stars, forks and recent pushes. Stars show community interest, not a guarantee of quality.
  3. Read the README, license and issues on GitHub before using a project.

Sources and maintenance

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗