Flutter电话号码输入插件phone_number_text_field的使用

Flutter电话号码输入插件phone_number_text_field的使用

Getting Started（开始使用）

本项目是一个用于Flutter的插件包，它包含适用于Android和/或iOS平台的特定实现代码。

对于Flutter开发的帮助，您可以查看官方文档，其中提供了教程、示例、移动开发指南以及完整的API参考。

使用示例

以下是一个完整的示例代码，展示如何在Flutter应用中使用phone_number_text_field插件：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    var darkTheme = ThemeData.dark().copyWith(primaryColor: Colors.blue);

    return MaterialApp(
      title: 'Demo',
      themeMode: ThemeMode.dark,
      darkTheme: darkTheme,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Demo')),
        body: MyHomePage(),
      ),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<FormState> formKey = GlobalKey<FormState>();

  final TextEditingController controller = TextEditingController();
  String initialCountry = 'TN';
  PhoneNumber number = PhoneNumber(isoCode: 'TN');

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Form(
      key: formKey,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          // 国际电话号码输入框
          InternationalPhoneNumberInput(
            textDirection: TextDirection.rtl, // 文本方向
            onInputChanged: (PhoneNumber number) { // 输入改变时回调
              print(number.phoneNumber);
            },
            onInputValidated: (bool value) { // 验证结果回调
              print(value);
            },
            selectorConfig: const SelectorConfig( // 下拉选择器配置
              selectorType: PhoneInputSelectorType.BOTTOM_SHEET, // 选择器类型
              setSelectorButtonAsPrefixIcon: true, // 设置选择器按钮为前缀图标
              leadingPadding: 24, // 前导填充
            ),
            ignoreBlank: false, // 忽略空白
            autoValidateMode: AutovalidateMode.disabled, // 自动验证模式
            selectorTextStyle: const TextStyle(color: Colors.black), // 选择器文本样式
            initialValue: number, // 初始值
            textFieldController: controller, // 文本控制器
            formatInput: true, // 格式化输入
            keyboardType: const TextInputType.numberWithOptions(signed: true, decimal: true), // 键盘类型
            inputBorder: const OutlineInputBorder(), // 输入框边框
            onSaved: (PhoneNumber number) { // 保存回调
              print('On Saved: $number');
            },
          ),

          const SizedBox(height: 12,), // 空白间距

          // 验证按钮
          ElevatedButton(
            onPressed: () {
              formKey.currentState?.validate(); // 验证表单
            },
            child: const Text('Validate'), // 按钮文本
          ),
          // 更新按钮
          ElevatedButton(
            onPressed: () {
              getPhoneNumber('+21651674704'); // 更新电话号码
            },
            child: const Text('Update'), // 按钮文本
          ),
          // 保存按钮
          ElevatedButton(
            onPressed: () {
              formKey.currentState?.save(); // 保存表单数据
            },
            child: const Text('Save'), // 按钮文本
          ),
        ],
      ),
    );
  }

  // 获取电话号码信息
  void getPhoneNumber(String phoneNumber) async {
    PhoneNumber number = await PhoneNumber.getRegionInfoFromPhoneNumber(phoneNumber, 'TN');
    setState(() {
      this.number = number;
    });
  }

  [@override](/user/override)
  void dispose() {
    controller.dispose(); // 释放控制器
    super.dispose();
  }
}