Flutter国际化电话号码输入插件international_phone_input的使用

international_phone_input

International Phone Number Input For Flutter

Usage

只需将组件放入您的应用程序中。

import 'package:international_phone_input/international_phone_input.dart';

String phoneNumber;
String phoneIsoCode;

// 当电话号码发生变化时调用此方法
void onPhoneNumberChange(String number, String internationalizedPhoneNumber, String isoCode) {
    setState(() {
       phoneNumber = number;
       phoneIsoCode = isoCode;
    });
}

// 默认带下拉列表的 Widget
[@override](/user/override)
Widget build(BuildContext context) => Scaffold(
     body: Center(
       child: InternationalPhoneInput(
          onPhoneNumberChange: onPhoneNumberChange, 
          initialPhoneNumber: phoneNumber,
          initialSelection: phoneIsoCode,
          enabledCountries: ['+233', '+1'] // 可用国家列表
       ),
     ),
 );

// 仅包含文本输入的 Widget
onValidPhoneNumber(
      String number, String internationalizedPhoneNumber, String isoCode) {
    setState(() {
      confirmedNumber = internationalizedPhoneNumber;
    });
  }

[@override](/user/override)
Widget build(BuildContext context) => Scaffold(
     body: Center(
       child: InternationalPhoneInputText(
         onValidPhoneNumber: onValidPhoneNumber,
        ),
     ),
 );

// 带装饰的 Widget
[@override](/user/override)
Widget build(BuildContext context) => Scaffold(
     body: Center(
       child: InternationalPhoneInput(
          decoration: InputDecoration.collapsed(hintText: '(416) 123-4567'),
          onPhoneNumberChange: onPhoneNumberChange, 
          initialPhoneNumber: phoneNumber,
          initialSelection: phoneIsoCode,
          enabledCountries: ['+233', '+1'],
          showCountryCodes: false // 隐藏国家代码
       ),
     ),
 );

Customization

以下是可用于自定义 Widget 的属性列表：

示例代码

以下是一个完整的示例代码，展示如何使用 international_phone_input 插件：

import 'package:flutter/material.dart';
import 'package:international_phone_input/international_phone_input.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String phoneNumber;
  String phoneIsoCode;
  bool visible = false;
  String confirmedNumber = '';

  // 处理电话号码变化
  void onPhoneNumberChange(
      String number, String internationalizedPhoneNumber, String isoCode) {
    print(number);
    setState(() {
      phoneNumber = number;
      phoneIsoCode = isoCode;
    });
  }

  // 处理有效电话号码验证
  onValidPhoneNumber(
      String number, String internationalizedPhoneNumber, String isoCode) {
    setState(() {
      visible = true;
      confirmedNumber = internationalizedPhoneNumber;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('International Phone Input Example'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Spacer(flex: 1),
            // 默认 Widget
            InternationalPhoneInput(
              onPhoneNumberChange: onPhoneNumberChange,
              initialPhoneNumber: phoneNumber,
              initialSelection: phoneIsoCode,
              enabledCountries: ['+233', '+1'],
              labelText: "Phone Number",
            ),
            SizedBox(height: 20),
            // 带装饰的 Widget
            InternationalPhoneInput(
              decoration: InputDecoration.collapsed(hintText: '(123) 123-1234'),
              onPhoneNumberChange: onPhoneNumberChange,
              initialPhoneNumber: phoneNumber,
              initialSelection: phoneIsoCode,
              enabledCountries: ['+233', '+1'],
              showCountryCodes: false,
              showCountryFlags: true,
            ),
            SizedBox(height: 20),
            // 分隔线
            Container(
              width: double.infinity,
              height: 1,
              color: Colors.black,
            ),
            SizedBox(height: 50),
            // 仅包含文本输入的 Widget
            InternationalPhoneInputText(
              onValidPhoneNumber: onValidPhoneNumber,
            ),
            // 显示确认的电话号码
            Visibility(
              child: Text(confirmedNumber),
              visible: visible,
            ),
            Spacer(flex: 2)
          ],
        ),
      ), // 这个逗号使自动格式化更美观
    );
  }
}