flutter_multi_formatter

pub.dev likes popularity pub points style: effective dart Awesome Flutter

包含的格式化器

  1. 电话格式化器
  2. 信用卡/借记卡格式化器
  3. 货币格式化器
  4. 掩码格式化器

特殊实用工具

  1. 比特币(BTC)钱包验证器;
  2. 数字提取器(允许从字符串中提取所有数字)
  3. 电话号码验证器(检查基于国家电话代码和掩码,因此比简单的正则表达式更正式和可靠)
  4. “是否为数字”检查器(简单检查输入字符串值是否为数字)
  5. 货币字符串格式化器(允许将数字转换为货币字符串表示,例如将10000转换为10,000.00$)
  6. Unfocuser(一个用于在没有任何样板代码的情况下取消任何文本字段焦点的控件。使用极其简单)

格式化电话号码

PhoneInputFormatter.replacePhoneMask(
    countryCode: 'RU',
    newMask: '+0 (000) 000 00 00',
);
PhoneInputFormatter.addAlternativePhoneMasks(
    countryCode: 'BR',
    alternativeMasks: [
    '+00 (00) 0000-0000',
    '+(00) 00000',
    '+00 (00) 00-0000',
    ],
);
/// There is also a possibility to enter endless phones 
/// by setting allowEndlessPhone to true 
/// this means that you can enter a phone number of any length
/// its part that matches a mask will be formatted 
/// and the rest will be entered unformatted
/// is will allow you to support any phones (even those that are not supported by the formatter yet)
PhoneInputFormatter(
    onCountrySelected: _onCountrySelected,
    allowEndlessPhone: true,
)

格式化信用卡/借记卡

格式化货币

使用方法

import 'package:flutter_multi_formatter/flutter_multi_formatter.dart';

包含的格式化器列表

/// for phone numbers with a fully automated detection
PhoneInputFormatter

/// for anything that can be masked
MaskedInputFormatter

/// for credit / debit cards
CreditCardNumberInputFormatter
CreditCardCvcInputFormatter
CreditCardExpirationDateFormatter

/// for any inputs where you need to restrict or
/// allow some characters
RestrictingInputFormatter

/// for currencies
MoneyInputFormatter
PosInputFormatter

实用方法和控件

验证比特币钱包(也支持bech32)

您可以使用这些示例钱包来测试验证器

P2PKH 地址以数字1开头 示例:1BvBMSEYstWetqTFn5Au4m4GFg7xJaNVN2

P2SH 地址以数字3开头 示例:3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy

Bech32 地址也称为“bc1 地址”,以 bc1 开头 示例:bc1qar0srrr7xfkvy5l643lydnw9re59gtzzwf5mdq

/// a simple check if its a BTC wallet or not, regardless of its type
bool isBitcoinWalletValid(String value);

/// a bit more complicated check which can return the type of 
/// BTC wallet and return SegWit (Bech32), Regular, or None if 
/// the string is not a BTC address
BitcoinWalletType getBitcoinWalletType(String value);

/// Detailed check, for those who need to get more details 
/// of the wallet. Returns the address type, the network, and 
/// the wallet type along with its address. 
/// It always returns BitcoinWalletDetails object. To check if it's
/// valid or not use bitcoinWalletDetails.isValid getter
/// IMPORTANT The BitcoinWalletDetails class overrides an 
/// equality operators so two BitcoinWalletDetails objects can be 
/// compared simply like this bwd1 == bwd2
BitcoinWalletDetails getBitcoinWalletDetails(String? value);

从字符串中获取所有数字并将其合并为一个新字符串,例如,像 fGgfjh456bb78 这样的字符串将被转换为:45678

import 'package:flutter_multi_formatter/flutter_multi_formatter.dart';

String toNumericString(String text);

如果检查的字符是数字,则返回“true”

import 'package:flutter_multi_formatter/flutter_multi_formatter.dart';

bool isDigit(String character);

toCurrencyString() 由 MoneyInputFormatter 内部使用,但您也可以直接使用它

import 'package:flutter_multi_formatter/flutter_multi_formatter.dart';

String toCurrencyString(String value, {
    int mantissaLength = 2,
    /// in case you need a period as a thousand separator
    /// simply change ThousandSeparator.Comma to ThousandSeparator.Period
    /// and you will get 1.000.000,00 instead of 1,000,000.00
    ThousandSeparator thousandSeparator = ThousandSeparator.Comma,
    ShorteningPolicy shorteningPolicy = ShorteningPolicy.NoShortening,
    String leadingSymbol = '',
    String trailingSymbol = '',
    bool useSymbolPadding = false
});

print(toCurrencyString('123456', leadingSymbol: MoneySymbols.DOLLAR_SIGN)); // $123,456.00

/// the values can also be shortened to thousands, millions, billions... 
/// in this case a 1000 will be displayed as 1K, and 1250000 will turn to this 1.25M
var result = toCurrencyString(
    '125000', 
    leadingSymbol: MoneySymbols.DOLLAR_SIGN,
    shorteningPolicy: ShorteningPolicy.RoundToThousands
); // $125K

result = toCurrencyString(
    '1250000', 
    leadingSymbol: MoneySymbols.DOLLAR_SIGN,
    shorteningPolicy: ShorteningPolicy.RoundToMillions
); // 1.25M

还有一个该函数的“扩展”版本,可用于 double、int 和 String。

import 'package:flutter_multi_formatter/flutter_multi_formatter.dart';

var someNumericValue = 123456;
print(someNumericValue.toCurrencyString(leadingSymbol: MoneySymbols.DOLLAR_SIGN)); // $123,456.00

var someNumericStringValue = '123456';
print(someNumericStringValue.toCurrencyString(trailingSymbol: MoneySymbols.EURO_SIGN)); // 123,456.00€
Unfocuser()

Unfocuser 允许您在点击文本输入区域外时取消任何文本输入的焦点并隐藏屏幕键盘。使用方法如下

@override
Widget build(BuildContext context) {
return Unfocuser(
    child: Scaffold(
    body: SingleChildScrollView(
        child: Padding(
        padding: const EdgeInsets.all(30.0),
        child: Form(
            key: _formKey,
            child: Column(
            children: <Widget>[
                TextFormField(
                keyboardType: TextInputType.phone,
                inputFormatters: [
                    PhoneInputFormatter()
                ],
                ),
            ],
            ),
        ),
        ),
    ),
    ),
);
}

更详细的描述

PhoneInputFormatter()

自动检测电话号码所属的国家,并根据其掩码格式化号码。您无需关心国家列表或其他任何内容。整个过程完全自动化。您只需像这样将此格式化器添加到格式化器列表中

TextFormField(
    keyboardType: TextInputType.phone,
    inputFormatters: [
        PhoneInputFormatter()
    ],
),

您还可以通过将回调函数传递给格式化器来获取所选电话号码的国家数据。

TextFormField(
    keyboardType: TextInputType.phone,
    inputFormatters: [
        PhoneInputFormatter(onCountrySelected:  (PhoneCountryData countryData) {
            print(countryData.country);
        });
    ],
),
CreditCardNumberInputFormatter()

CreditCardNumberInputFormatter 根据预定义的卡片系统列表自动检测卡片类型,并相应地格式化号码。这种检测非常粗糙,可能无法与许多卡片系统一起使用。所有支持的系统都可以在 中作为字符串常量

class CardSystem {
  static const String VISA = 'Visa';
  static const String MASTERCARD = 'Mastercard';
  static const String JCB = 'JCB';
  static const String DISCOVER = 'Discover';
  static const String MAESTRO = 'Maestro';
  static const String AMERICAN_EXPRESS= 'Amex';
}

无论如何,如果号码不受支持,它将按原样返回,您的输入也不会因此而中断

TextFormField(
    keyboardType: TextInputType.number,
    inputFormatters: [
        CreditCardNumberInputFormatter(onCardSystemSelected:  (CardSystemData cardSystemData) {
            print(cardSystemData.system);
        });
    ],
),

/// there's also a method to format a number as a card number
/// the method is located in a credit_card_number_input_formatter.dart file
String formatAsCardNumber(
String cardNumber, {
    bool useSeparators = true,
});

/// and a method to check is a card is valid
bool isCardValidNumber(String cardNumber);
/// but it will return true only if the card system is supported, 
/// so you should not really rely on that

掩码格式化器

MaskedInputFormatter()

此格式化器允许您通过掩码轻松格式化文本。此格式化器非常小心地处理当前文本选择,使输入不显得不自然。像使用其他格式化器一样使用它

/// # matches any character and 0 matches digits
/// so, in order to format a string like this GHJ45GHJHN to GHJ-45-GHJHN
/// use a mask like this
TextFormField(
    keyboardType: TextInputType.phone,
    inputFormatters: [
        MaskedInputFormatter('###-00-#####')
    ],
),

但是,如果您希望 #(哈希符号)仅匹配某些特定值,您可以将正则表达式传递给 [anyCharMatcher] 参数

/// in this scenario, the # symbol will only match uppercase latin letters
TextFormField(
    keyboardType: TextInputType.phone,
    inputFormatters: [
        MaskedInputFormatter('###-00-#####', anyCharMatcher: RegExp(r'[A-Z]'))
    ],
),

货币输入格式化器

MoneyInputFormatter()

TextFormField(
    keyboardType: TextInputType.number,
    inputFormatters: [
        MoneyInputFormatter(
            leadingSymbol: MoneySymbols.DOLLAR_SIGN
        )
    ],
),
...

TextFormField(
    keyboardType: TextInputType.number,
    inputFormatters: [
        MoneyInputFormatter(
            trailingSymbol: MoneySymbols.EURO_SIGN,
            useSymbolPadding: true,
            mantissaLength: 3 // the length of the fractional side
        )
    ],
),

销售点输入格式化器

PosInputFormatter

允许您像在销售终端上一样输入数字

TextFormField(
    keyboardType: TextInputType.number,
    inputFormatters: [
        PosInputFormatter(),
    ],
),
...


For more details see [example](https://github.com/caseyryan/flutter_multi_formatter/tree/master/example) project. And feel free to open an issue if you find any bugs of errors

GitHub

查看 Github