Flutter格式化输入插件masked_text_field的使用

Masked Text Field

Features

masked_text_field 是一个用于格式化输入的Flutter插件，可以格式化日期、电话号码、IP地址等。如果你需要对输入进行格式化，比如电话号码或IP地址，可以使用这个插件。

Getting Started

首先，在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  masked_text_field: any

Usage Example

导入包

import 'package:masked_text_field/masked_text_field.dart';

添加文本字段

MaskedTextField 是一个简单的Widget，用法与其他文本字段类似。

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

• 'x' 是默认的占位符字符，你的文本将填充在这个位置。
• 你可以通过设置 escapeCharacter 属性来更改占位符字符。

例如，使用 # 作为占位符字符：

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

完整示例

以下是一个完整的示例，展示了如何在Flutter应用中使用 MaskedTextField 来格式化IP地址、日期和电话号码。

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);

  @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 Request。对于重大更改，请先创建一个Issue讨论你想要更改的内容。