Masked Text Field
Masked Text Field
Features
A package for masked text field for formet your text and good UI, so if you want a mask for phone number, or IP address or any kind of formate. Use this package.
Getting started
Add the dependency in pubsec.yaml file.
dart
dependencies:
flutter:
sdk: flutter
masked_text_field: any
Usage Example
import flutter_social_button.dart
import 'package:masked_text_field/masked_text_field.dart';
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", labelText: "IP Address"),
);
‘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(
hintText: "192.192.192.192", labelText: "IP Address"),
);
‘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);
},
),
],
),
),
);
}
}
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Comments are closed.