A nice looking and validated Password TextFormField for flutter

password_validated_field

a package that lets you include a cool, nice looking and validated password textformfield in your app to enhance user experience. the package is fully & easily modifiable.

customizable attributes

import package:password_validated_field/src/requirement_widget.dart and following fields are modifiable:

• inputdecoration
• texteditingcontroller
• textinputaction
• oneditcomplete
• onfieldsubmitted
• focusnode
• cursorcolor
• textstyle
• activeicon
• inactiveicon
• activerequirementcolor
• inactiverequirementcolor

here’s how it looks

below are few samples of what the package looks like.

import the package and use package:password_validated_field/password_validated_field.dart

simple usage

class example extends statefulwidget {
  const example({key? key}) : super(key: key);

  @override
  _examplestate createstate() => _examplestate();
}

class _examplestate extends state<example> {
  // simple check
  bool _validpassword = false;

  // form key
  final _formkey = globalkey<formstate>();

  @override
  widget build(buildcontext context) {
    return scaffold(
      appbar: appbar(
        title: text("password validated field"),
      ),
      body: form(
        key: _formkey,
        child: column(
          mainaxisalignment: mainaxisalignment.center,
          children: [
            _validpassword
                ? text(
                    "password valid!",
                    style: textstyle(fontsize: 22.0),
                  )
                : container(),
            passwordvalidatedfields(), // password validated field from package
            elevatedbutton(
                onpressed: () {
                  if (_formkey.currentstate!.validate()) {
                    setstate(() {
                      _validpassword = true;
                    });
                  } else {
                    setstate(() {
                      _validpassword = false;
                    });
                  }
                },
                child: text("check password!")),
          ],
        ),
      ),
    );
  }
}

customized usage

class customizefieldexample extends statefulwidget {
  const customizefieldexample({key? key}) : super(key: key);

  @override
  _customizefieldexamplestate createstate() => _customizefieldexamplestate();
}

class _customizefieldexamplestate extends state<customizefieldexample> {
  // simple check
  bool _validpassword = false;

  // form key
  final _formkey = globalkey<formstate>();

  @override
  widget build(buildcontext context) {
    return scaffold(
      appbar: appbar(
        title: text("customized field"),
      ),
      body: form(
        key: _formkey,
        child: column(
          mainaxisalignment: mainaxisalignment.center,
          children: [
            _validpassword
                ? text(
                    "password valid!",
                    style: textstyle(fontsize: 22.0),
                  )
                : container(),
            passwordvalidatedfields(
              inactiveicon: icons.cancel_outlined,
              activeicon: icons.check,
              inactiverequirementcolor: colors.orange,
              activerequirementcolor: colors.green,
            ), // password validated field from package
            elevatedbutton(
                onpressed: () {
                  if (_formkey.currentstate!.validate()) {
                    setstate(() {
                      _validpassword = true;
                    });
                  } else {
                    setstate(() {
                      _validpassword = false;
                    });
                  }
                },
                child: text("check password!")),
          ],
        ),
      ),
    );
  }
}

more customized usage

class morecustomizedfield extends statefulwidget {
  const morecustomizedfield({key? key}) : super(key: key);

  @override
  _morecustomizedfieldstate createstate() => _morecustomizedfieldstate();
}

class _morecustomizedfieldstate extends state<morecustomizedfield> {
  // simple check
  bool _validpassword = false;

  // form key
  final _formkey = globalkey<formstate>();

  @override
  widget build(buildcontext context) {
    return scaffold(
      appbar: appbar(
        title: text("customized field"),
      ),
      body: form(
        key: _formkey,
        child: column(
          mainaxisalignment: mainaxisalignment.center,
          children: [
            _validpassword
                ? text(
                    "password valid!",
                    style: textstyle(fontsize: 22.0),
                  )
                : container(),
            passwordvalidatedfields(
              inactiveicon: icons.cancel,
              activeicon: icons.done_all,
              inputdecoration: inputdecoration(
                labeltext: "enter password",
                filled: true,
                fillcolor: colors.grey[300],
                prefixicon: icon(icons.lock),
                enabledborder: outlineinputborder(
                  borderside: borderside(color: colors.transparent),
                  borderradius: borderradius.circular(10.0),
                ),
                focusedborder: outlineinputborder(
                  borderside: borderside(color: colors.blue),
                  borderradius: borderradius.circular(10.0),
                ),
                errorborder: outlineinputborder(
                  borderside: borderside(color: colors.red),
                  borderradius: borderradius.circular(10.0),
                ),
                focusederrorborder: outlineinputborder(
                  borderside: borderside(color: colors.red),
                  borderradius: borderradius.circular(10.0),
                ),
              ),
            ), // password validated filed from package
            elevatedbutton(
                onpressed: () {
                  if (_formkey.currentstate!.validate()) {
                    setstate(() {
                      _validpassword = true;
                    });
                  } else {
                    setstate(() {
                      _validpassword = false;
                    });
                  }
                },
                child: text("check password!")),
          ],
        ),
      ),
    );
  }
}

modifying the package

you can easily modify the package according to your need.

major attributes to look for:

• regexp at the bottom of validated_field
• onchange callback in validated_field
• requirement_widget in requirement_widget
• requirement_widget checks added in validated_field

regexp modification

• 1 uppercase regexp(r'[a-z]')
• 1 lowercase regexp(r'[a-z]')
• 1 numeric value regexp(r'[0-9]')
• 1 special character regexp(r'[[email protected]#$%^&*(),.?":{}|<>]')
• 6 character length _pass.length >= 6

combine regexp that you would need to modify along with the above mentioned:

regexp(r'^(?=.*?[a-z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[[email protected]#$&*~]).{6,}$')

complete simple example, here.