Flutter电话号码格式化输入插件phone_number_text_input_formatter的使用

Flutter电话号码格式化输入插件phone_number_text_input_formatter的使用

这个是用于在文本输入时提供电话号码格式化的Flutter插件。它是一个关键辅助工具，用于创建需要限制和验证用户输入格式的电话号码输入字段。

特性

• 零依赖
• 高效地实时格式化电话号码，性能优于基于正则表达式的解决方案。
• 可以根据需要自定义格式，给你更多的灵活性和控制。
• 提供了预实现的流行国际和国家电话号码格式。

使用方法

格式化所有可用的国际格式

TextField(
  keyboardType: TextInputType.phone,
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp(r'[0-9,+]')), // 允许输入数字和加号
    const PhoneNumberTextInputFormatter(prefix: '+'), // 设置前缀为 +
  ],
)

格式化美国电话号码（国际格式）

TextField(
  keyboardType: TextInputType.phone,
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp(r'[0-9,+]')), // 允许输入数字和加号
    const NationalPhoneNumberTextInputFormatter.US(prefix: '+'), // 设置前缀为 +，并使用美国格式
  ],
)

自定义电话号码格式

TextField(
  keyboardType: TextInputType.phone,
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp(r'[0-9,+]')), // 允许输入数字和加号
    const NationalPhoneNumberTextInputFormatter(
      prefix: '+',
      countryCode: '28', // 国家码为28
      groups: [
        (length: 4, leading: ' [', trailing: '] '), // 每4个字符后添加 "[ ] "
        (length: 3, leading: '', trailing: '-'), // 每3个字符后添加 "-"
        (length: 3, leading: '', trailing: ' '), // 每3个字符后添加 " "
      ],
    ),
  ],
)

完整示例Demo

以下是一个完整的示例，展示了如何在Flutter应用中使用phone_number_text_input_formatter插件。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:phone_number_text_input_formatter/phone_number_text_input_formatter.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Phone Number Text Input Formatter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const ExamplePage(title: 'Phone Number Text Input Formatter Demo Home Page'),
    );
  }
}

class ExamplePage extends StatelessWidget {
  final String title;
  const ExamplePage({super.key, required this.title});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(32.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextField(
                decoration: const InputDecoration(
                  labelText: 'All supported countries',
                  helperText: ' '
                ),
                inputFormatters: [
                  FilteringTextInputFormatter.allow(RegExp(r'[0-9,+]')), // 允许输入数字和加号
                  const PhoneNumberTextInputFormatter(prefix: '+'), // 设置前缀为 +
                ],
              ),
              TextField(
                decoration: const InputDecoration(
                  labelText: 'US',
                  hintText: '+1 (000) 000-0000',
                  helperText: ' '
                ),
                inputFormatters: [
                  FilteringTextInputFormatter.allow(RegExp(r'[0-9,+]')), // 允许输入数字和加号
                  const NationalPhoneNumberTextInputFormatter.US(prefix: '+'), // 设置前缀为 +，并使用美国格式
                ],
              ),
              TextField(
                decoration: const InputDecoration(
                  labelText: 'Denmark',
                  hintText: '+45 00 000 0000',
                  helperText: 'Default format'
                ),
                inputFormatters: [
                  FilteringTextInputFormatter.allow(RegExp(r'[0-9,+]')), // 允许输入数字和加号
                  NationalPhoneNumberTextInputFormatter.DK(prefix: '+'), // 使用丹麦格式
                ],
              ),
              TextField(
                decoration: const InputDecoration(
                  labelText: 'Custom',
                  hintText: '+28 [0000] 000-000',
                ),
                inputFormatters: [
                  FilteringTextInputFormatter.allow(RegExp(r'[0-9,+]')), // 允许输入数字和加号
                  const NationalPhoneNumberTextInputFormatter(
                    prefix: '+',
                    countryCode: '28', // 国家码为28
                    groups: [
                      (length: 4, leading: ' [', trailing: '] '), // 每4个字符后添加 "[ ] "
                      (length: 3, leading: '', trailing: '-'), // 每3个字符后添加 "-"
                      (length: 3, leading: '', trailing: ' '), // 每3个字符后添加 " "
                    ],
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}