带掩码的文本框

带掩码的文本框

pub package pub points LinkedIn Instagram Facebook Youtube

特点

一个带掩码的文本框包，用于格式化您的文本和良好的UI，如果您需要电话号码、IP地址或任何格式的掩码。请使用此包。 Image

入门

在pubspec.yaml文件中添加依赖项。

dart
  dependencies:
    flutter:
      sdk: flutter
    masked_text_field: any

用法示例

import flutter_social_button.dart


import 'package:masked_text_field/masked_text_field.dart';

用于添加文本框

非常简单，它是一个Widget，就像所有其他的Widget一样。


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”是您的文本将具有的普通字符。

此示例最终将再现类似192.192.192.192的内容。

您还可以更改要使用的转义字符。

如果您想更改它，您只需要填充escapeCharacter属性为您想要的字符。


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

“x”是默认的转义字符。

示例


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);
              },
            ),
          ],
        ),
      ),
    );
  }
}

贡献

欢迎 Pull requests。对于重大更改，请先打开一个 issue 来讨论您想进行的更改。

GitHub

查看 Github