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.

Overview

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 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'[!@#$%^&*(),.?":{}|<>]')
  • 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])(?=.*?[!@#\$&*~]).{6,}$')

Complete Simple Example, here.

You might also like...

A tool to easily install the Android SDK command-line and platform tools.

gibadb A tool to easily install the Android SDK command-line and platform tools. For developers: This README describes the CLI tool that ships with th

Sep 22, 2022

A flutter package that allows you to transform your excel to json

excel_to_json A package that allows you to transform your excel to the following format: Excel To JSON Getting Started At current the package allows y

Nov 7, 2022

Volt is a wrapper over the Revolt API for easily writing bots using the Dart language.

Volt is a wrapper over the Revolt API for easily writing bots using the Dart language. It is currently in active development so not all of the functionality has yet been implemented.

Dec 13, 2022

Easily swap Flutter web renderers at runtime

renderer_switcher Swap Web Renderers in a Flutter Web app at runtime. Installation To use this plugin, add renderer_switcher as a dependency in your p

Oct 21, 2022

A Flutter library to make Rest API clients more easily. Inspired by Java Feing.

A Flutter library to make Rest API clients more easily. Inspired by Java Feing. Features Facilitated JSON encode and decode using common interfaces. F

Mar 15, 2022

Chuanying - what you see is what you get. 传影--所见即所得

Chuanying - what you see is what you get. 传影--所见即所得

传影--所见即所得 简介 从前 想要制作证件照,需要先把图片用QQ传到电脑,再用PS手动抠图; 看到一句喜欢的话,想要记到电脑里,需要一个字一个字用键盘打出来; 看到黑板上老师写的公式,想要记到Word里,需要用MathType一点点打出来; 但是有没有可能,只用手机拍照,就能搞定上面所有的事,一步

Apr 8, 2022

Official Git of flutter code-push made by Chimera inc. If you want to get more info or seek for biz corporation, you can contact [email protected].

中文版 Chimera Flutter Code Push Chimera is a Dart compiler developed by ourselves, which generates interpretable and executable bytecode to implement co

Oct 6, 2022

Application that simplifies the search process in several supermarkets, allowing the user to define the shopping list in a few minutes.

economiz Application that solves the price research process in different supermarkets, facilitating and simplifying this process for the user. Getting

Dec 29, 2021

MB Contact Form is a basic flutter widget which helps you for your contact page.

mb_contact_form is a third party flutter package. This is a simple version of Contact Form. This can be easily added to your flutter projects. This make your works simpler and your code shorter. This is recently updated and has null safety too.

Oct 17, 2022
Owner
Muhammad Hamza
Flutter - UI/UX - Writer @Medium Find me @mhamzadev - YouTube @happyfluttering
Muhammad Hamza
Flutter Cool Random User Generate 🔥🔥

Flutter Cool Random User Generate ????

Hmida 8 Sep 10, 2022
Flutter App which lets you share memes among your friends.

meme_share_app About App Flutter App which lets you share memes among your friends . Here one have 2 options : NEXT : Load Next Meme. SHARE : To Share

null 0 Oct 30, 2021
Okan YILDIRIM 37 Jul 10, 2022
Flutter package to help you lazily load and display pages of items as the user scrolls down your screen.

Flutter package to help you lazily load and display pages of items as the user scrolls down your screen.

Edson Bueno 425 Dec 13, 2022
Doing cool stuff with Git VCS in dart programming language.

Git Assistant Assists you to use git and .git in easy and simple way with robust API Features Generates git commands in simple form Supports commands,

Ehsan Aramide 10 Mar 4, 2022
The diozz package helps you to deal with APIs easily and speed up the process of writing code.

Diozz The diozz package helps you to deal with APIs easily and speed up the process of writing code. Installation Diozz Use that command in the termin

Mohamed Abu.elezz 4 Nov 13, 2022
Integrate easily the Paygate Global Platform into your Flutter app

Integrate easily the Paygate Global Platform into your Flutter app Features Implement payment with the Paygate Global Platform. Support for two paymen

Kokou AGBAVON 7 Dec 15, 2022
A flutter utility to easily create flavors in your flutter application

Flutter Flavorizr A flutter utility to easily create flavors in your flutter application Getting Started Let's start by setting up our environment in

Angelo Cassano 268 Jan 1, 2023
Flutter library to add gestures and animations to each Shape you draw on your canvas in your CustomPainter

Flutter library to bring your CustomPainter ?? to Life ✨ ⚡️ touchable library gives you the ability to add various gestures and animations to each Sha

Natesh Bhat 190 Jan 7, 2023
A Dart package to web scraping data from websites easily and faster using less code lines.

Chaleno A flutter package to webscraping data from websites This package contains a set of high-level functions that make it easy to webscrap websites

António Nicolau 30 Dec 29, 2022