flutter如何实现选择国家或地区的电话号码区号及通讯录插件

在Flutter开发中，如何实现选择国家或地区的电话号码区号功能？有没有推荐的插件可以支持国际区号选择，并且能够集成手机通讯录？希望插件能提供完整的国家列表、区号数据，同时支持搜索和自定义UI样式。最好能兼容iOS和Android平台，有实际项目使用案例的优先。谢谢！

2 回复

推荐使用 country_pickers 或 libphonenumber 插件。它们提供国家选择、区号显示及通讯录集成功能，支持自定义UI和验证。

更多关于flutter如何实现选择国家或地区的电话号码区号及通讯录插件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现选择国家/地区电话号码区号及通讯录功能，可以使用以下插件组合：

1. 电话号码区号选择

推荐插件：country_code_picker

dependencies:
  country_code_picker: ^2.0.2

基本使用：

import 'package:country_code_picker/country_code_picker.dart';

CountryCodePicker(
  onChanged: (CountryCode countryCode) {
    print("选择的国家代码: ${countryCode.code}");
    print("国家名称: ${countryCode.name}");
    print("区号: ${countryCode.dialCode}");
  },
  initialSelection: 'CN', // 默认选择中国
  favorite: ['CN', 'US'], // 常用国家
  showCountryOnly: false,
  showOnlyCountryWhenClosed: false,
  alignLeft: false,
)

2. 通讯录访问

推荐插件：contacts_service

dependencies:
  contacts_service: ^0.6.1

权限配置：

Android (android/app/src/main/AndroidManifest.xml):

<uses-permission android:name="android.permission.READ_CONTACTS" />

iOS (ios/Runner/Info.plist):

<key>NSContactsUsageDescription</key>
<string>需要访问通讯录来选择联系人</string>

基本使用：

import 'package:contacts_service/contacts_service.dart';

// 请求权限并获取通讯录
Future<void> getContacts() async {
  // 检查权限
  PermissionStatus status = await Permission.contacts.request();
  
  if (status.isGranted) {
    // 获取所有联系人
    Iterable<Contact> contacts = await ContactsService.getContacts();
    
    // 显示联系人列表
    for (Contact contact in contacts) {
      print("姓名: ${contact.displayName}");
      if (contact.phones != null && contact.phones!.isNotEmpty) {
        print("电话: ${contact.phones!.first.value}");
      }
    }
  }
}

// 选择单个联系人
Future<Contact?> pickContact() async {
  try {
    Contact contact = await ContactsService.openDeviceContactPicker();
    return contact;
  } catch (e) {
    print("选择联系人失败: $e");
    return null;
  }
}

3. 权限处理

添加权限处理插件：

dependencies:
  permission_handler: ^10.2.0

完整示例

import 'package:flutter/material.dart';
import 'package:country_code_picker/country_code_picker.dart';
import 'package:contacts_service/contacts_service.dart';
import 'package:permission_handler/permission_handler.dart';

class PhoneContactPage extends StatefulWidget {
  @override
  _PhoneContactPageState createState() => _PhoneContactPageState();
}

class _PhoneContactPageState extends State<PhoneContactPage> {
  String countryCode = '+86';
  String phoneNumber = '';

  Future<void> selectContact() async {
    final status = await Permission.contacts.request();
    if (status.isGranted) {
      try {
        Contact? contact = await ContactsService.openDeviceContactPicker();
        if (contact != null && contact.phones!.isNotEmpty) {
          setState(() {
            phoneNumber = contact.phones!.first.value ?? '';
          });
        }
      } catch (e) {
        print('选择联系人错误: $e');
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('选择电话号码')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            // 国家区号选择
            CountryCodePicker(
              onChanged: (CountryCode code) {
                setState(() {
                  countryCode = code.dialCode!;
                });
              },
              initialSelection: 'CN',
            ),
            
            // 电话号码输入
            TextField(
              decoration: InputDecoration(labelText: '电话号码'),
              keyboardType: TextInputType.phone,
              onChanged: (value) => phoneNumber = value,
            ),
            
            // 从通讯录选择
            ElevatedButton(
              onPressed: selectContact,
              child: Text('从通讯录选择'),
            ),
          ],
        ),
      ),
    );
  }
}

这些插件提供了完整的解决方案，可以轻松实现电话号码区号选择和通讯录访问功能。记得根据实际需求处理权限和错误情况。

回到顶部