masked_text_field

Description:

masked text field

Masked Text Field
Masked Text Field #






Features #
A package for masked text field for format your text (eg. Date, phone number, IP address etc.), so if you want a mask for phone number, or IP address or any kind of format. Use this package.


Getting started #
Add the dependency in pubsec.yaml file.
dart
dependencies:
flutter:
sdk: flutter
masked_text_field: any
copied to clipboard
Usage Example #
import flutter_social_button.dart

import 'package:masked_text_field/masked_text_field.dart';

copied to clipboard
for add Text Field #
It's very simple, it's a Widget as all the other ones.

MaskedTextField
(
maskedTextFieldController: textfieldController,
mask: "xxx.xxx.xxx.xxx",
maxLength: 15,
keyboardType: TextInputType.number,
inputDecoration: new InputDecoration(
hintText: "192.192.192.192",
counterText: "",
labelText: "IP Address"),
);

copied to clipboard
'x' is the normal char that your text will have.
this sample reproduces something like this in the end: 192.192.192.192.
You can also change the escape character you want to use.
If you want to change it, you just need to fill the property escapeCharacter with the character you want.

MaskedTextField
(
maskedTextFieldController: textfieldController,
escapeCharacter: '#',
mask: "###.###.###.###",
maxLength: 15,
keyboardType: TextInputType.number,
inputDecoration: new InputDecoration(
counterText: "",
hintText: "192.192.192.192",
labelText: "IP Address"),
);

copied to clipboard
'x' is the default escape character.
Example #

import 'package:flutter/material.dart';
import 'package:masked_text_field/masked_text_field.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(title: 'Masked Text Field'),
);
}
}

class HomePage extends StatefulWidget {
final String title;
const HomePage({Key? key, required this.title}) : super(key: key);

@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

var ipController = TextEditingController();
var dateController = TextEditingController();
var phoneController = TextEditingController();

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('Enter IP Address'),
const SizedBox(height: 5,),
MaskedTextField(
textFieldController: ipController,
inputDecoration: const InputDecoration(
hintText: '192.192.192.192',
counterText: ""
),
autofocus: true,
mask: 'xxx.xxx.xxx.xxx',
maxLength: 15,
keyboardType: TextInputType.number,
onChange: (String value) {
print(value);
},
),
const SizedBox(height: 10,),
const Text('Enter Date'),
const SizedBox(height: 5,),
MaskedTextField(
textFieldController: dateController,
inputDecoration: const InputDecoration(
hintText: 'DD/MM/YYYY',
counterText: ""
),
autofocus: true,
mask: 'xx/xx/xxxx',
maxLength: 10,
keyboardType: TextInputType.number,
onChange: (String value) {
print(value);
},
),
const SizedBox(height: 10,),
const Text('Enter Phone Number'),
const SizedBox(height: 5,),
MaskedTextField(
textFieldController: phoneController,
inputDecoration: const InputDecoration(
hintText: '98765-43210',
counterText: "",
prefixText: '+91 ',
),
autofocus: true,
mask: 'xxxxx-xxxxx',
maxLength: 11,
keyboardType: TextInputType.number,
onChange: (String value) {
print(value);
},
),
],
),
),
);
}
}

copied to clipboard
Contributing #
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.