GitLocker: The Coding Marketplace

Description:

muskey

Muskey #
An actually useful pattern matcher and field input formatter library for Flutter.
Muskey is a single-file light library inspired by vue-the-mask
that's shown its usefulness throughout my projects, so I decided to share it with the world.
Muskey supports unlimited number of masks, smart cursor positioning (even when cutting or pasting values),
and flexible customization. Clean input value and validity are available at any time.

A quick rundown on what this is #
Imagine you're creating a login/registration page and need a nice formatting for phone inputs.
Well, Muskey's got you covered:
// somewhere in your build method:

TextField(
...
inputFormatters: [
MuskeyFormatter.countryPhoneMasks(
allowOverflowingInputs: true,
),
],
),
copied to clipboard
And that's it! Smart cursor positioning and dynamic mask switch make the ux nice and usable:

But I want customizable stuff #
You can customize a list of masks to use and which symbols inside the masks are to be treated like wildcards and decorators!
Masks #
For example, you can configure Muskey for credit card number formatting:
// somewhere in your build method:

TextField(
...
inputFormatters: [
MuskeyFormatter(
masks: ['#### #### #### ####'],
overflow: OverflowBehavior.forbidden(),
),
],
),
copied to clipboard
Wildcards and decorators #
You can also customize wildcards and decorators like so:
// somewhere in your build method:

TextField(
...
inputFormatters: [
MuskeyFormatter(
masks: ['%^##-####-####-####'],
decorators: ['-'],
wildcards: {
'%': RegExp('[4-6]'),
'^': RegExp('[1-2]'),
},
overflow: OverflowBehavior.forbidden(),
),
],
),
copied to clipboard
This will only accept inputs with the first digit being 4, 5 or 6 and the second digit being 1 or 2.
Character transforms #
You can specify transforms to be applied during typing. These characters are looked for
inside the given mask and applied against the actual input.
TextField(
...
inputFormatters: [
MuskeyFormatter(
masks: ['@@@@@'],
wildcards: {
'@': RegExp('[a-zA-Z]'),
},
transforms: {
'@' : (s) => s.toUpperCase(),
},
overflow: OverflowBehavior.forbidden(),
),
],
),
copied to clipboard
Overflow #
You can also specify whether to allow inputs that are longer than any of the given masks by specifying overflow parameter.
Here's a custom setup with only German phone masks and demonstration of how overflow works:
MuskeyFormatter(
masks: [
"+49 (####) ###-####",
"+49 (###) ###-####",
"+49 (###) ##-####",
"+49 (###) ##-###",
"+49 (###) ##-##",
"+49-###-###",
],
overflow: OverflowBehavior(
allowed: overflowAllowed,
overflowOn: RegExp('[0-9]'),
),
)
copied to clipboard
Autofill #
You can enable an autofill feature to allow filling of pre-defined values in your masks.
Use it wisely! If you enable this feature, make sure your mask set is either a single mask or
has a common starting pattern (like german masks above)!
MuskeyFormatter(
masks: ["+380 (##) ###-##-##"],
allowAutofill: true,
);
copied to clipboard

A small discussion on design #
This formatter is stateless by design. It does support detecting the validity of your masks,
but if you want updates on it, you need to create your own ways of doing that. For example, you can get
current formatter info value inside onChanged callback in your TextField,
add a listener on your TextEditingController or any other way.
For example: #
...

final muskey = MuskeyFormatter.countryPhoneMasks(
allowOverflowingInputs: true,
);

...

build(BuildContext context) {
...
Row(
children: [
Expanded(
child: TextField(
inputFormatters: [muskey],
onChanged: (_) {
setState(() {});
},
),
),
const SizedBox(width: 30),
ElevatedButton(
child: const Text('NEXT'),
onPressed: muskey.info.isValid
? () {/*your code*/}
: null,
),
],
),
...
}
copied to clipboard
Usage: #
Create an instance of this class either inside your StatefulWidget, or
directly in your [build] method, and place it in [inputFormatters]
list of your [TextField]. Provide a non-empty list of masks to work with,
customize if needed.

Other features? Currency? Regex? #
No, there is no support for regex validation and currency formatting. The reason is the same as
in the case of vue-the-mask: there are libs that do it better.
This was originally designed as a pattern matcher to help with ever-present problems of pretty input formatting,
and I don't want to create a giant blob of this library.