Flutter联系人选择插件flutter_native_contact_picker_plus的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter联系人选择插件flutter_native_contact_picker_plus的使用

简介

flutter_native_contact_picker_plus 是基于 flutter_native_contact_picker 的增强版插件,允许Flutter应用提示用户从通讯录中选择联系人。该插件利用原生UI进行联系人选取,不需要特殊权限。

目前,该插件仅支持选择电话号码。扩展到请求其他联系人信息(如地址)或整个联系人记录是可能的(鼓励提交PR)。

功能

  • iOS支持
    • 单个联系人选取
    • 多个联系人选取
  • Android支持
    • 单个联系人选取

完整示例代码

以下是一个完整的示例代码,展示了如何使用 flutter_native_contact_picker_plus 插件来选择联系人。

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

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

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

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  // 创建一个 ContactPicker 实例
  final FlutterContactPickerPlus _contactPicker = FlutterContactPickerPlus();
  // 用于存储选中的联系人列表
  List<Contact>? _contacts;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('联系人选择示例'),
        ),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              // 单个联系人选取按钮
              MaterialButton(
                color: Colors.blue,
                child: const Text("单个"),
                onPressed: () async {
                  // 调用 selectContact 方法选择单个联系人
                  Contact? contact = await _contactPicker.selectContact();
                  setState(() {
                    // 更新状态,将选中的联系人添加到列表中
                    _contacts = contact == null ? null : [contact];
                  });
                },
              ),
              // 多个联系人选取按钮
              MaterialButton(
                color: Colors.blue,
                child: const Text("多个"),
                onPressed: () async {
                  // 调用 selectContacts 方法选择多个联系人
                  final contacts = await _contactPicker.selectContacts();
                  setState(() {
                    // 更新状态,将选中的联系人列表赋值给 _contacts
                    _contacts = contacts;
                  });
                },
              ),
              // 如果有选中的联系人,则显示联系人信息
              if (_contacts != null)
                ..._contacts!.map(
                  (e) => Text(e.toString()), // 将每个联系人转换为字符串并显示
                )
            ],
          ),
        ),
      ),
    );
  }
}

说明

  1. 导入依赖:首先需要在 pubspec.yaml 文件中添加 flutter_native_contact_picker_plus 依赖。
    dependencies:
      flutter:
        sdk: flutter
      flutter_native_contact_picker_plus: ^最新版本号
    

更多关于Flutter联系人选择插件flutter_native_contact_picker_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter联系人选择插件flutter_native_contact_picker_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用flutter_native_contact_picker_plus插件来选择联系人的代码示例。这个插件允许你访问设备的联系人列表,并允许用户选择一个或多个联系人。

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加flutter_native_contact_picker_plus依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_native_contact_picker_plus: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 配置Android权限

android/app/src/main/AndroidManifest.xml文件中添加必要的权限:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

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

    <!-- 其他配置 -->

</manifest>

3. 请求权限(可选)

在运行时请求权限(特别是在Android 6.0及以上版本中):

import 'package:permission_handler/permission_handler.dart';

Future<void> requestPermissions() async {
  var status = await Permission.contacts.status;
  if (!status.isGranted) {
    var result = await Permission.contacts.request();
    if (!result.isGranted) {
      // 权限被拒绝
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text('权限被拒绝'),
            content: Text('需要访问联系人权限才能使用该功能'),
            actions: <Widget>[
              FlatButton(
                child: Text('关闭'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          );
        },
      );
    }
  }
}

4. 使用插件选择联系人

下面是一个完整的示例,展示如何使用flutter_native_contact_picker_plus来选择联系人:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('联系人选择器示例'),
        ),
        body: ContactPickerScreen(),
      ),
    );
  }
}

class ContactPickerScreen extends StatefulWidget {
  @override
  _ContactPickerScreenState createState() => _ContactPickerScreenState();
}

class _ContactPickerScreenState extends State<ContactPickerScreen> {
  List<Contact> _contacts = [];

  void _pickContacts() async {
    try {
      List<Contact> result = await ContactPicker.pickContacts(
        withThumbnail: true,
        includeEmailAddresses: true,
        includePhoneNumbers: true,
      );
      setState(() {
        _contacts = result;
      });
    } catch (e) {
      print("Error: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            '选择的联系人',
            style: TextStyle(fontSize: 24),
          ),
          SizedBox(height: 16),
          Expanded(
            child: ListView.builder(
              itemCount: _contacts.length,
              itemBuilder: (context, index) {
                Contact contact = _contacts[index];
                return Card(
                  child: ListTile(
                    leading: CircleAvatar(
                      backgroundImage: NetworkImage(contact.thumbnailPath ?? ''),
                    ),
                    title: Text(contact.displayName ?? ''),
                    subtitle: Text(
                      '${contact.phoneNumbers.isNotEmpty ? contact.phoneNumbers.first.label ?? contact.phoneNumbers.first.number : ''}\n${contact.emailAddresses.isNotEmpty ? contact.emailAddresses.first.address : ''}',
                    ),
                  ),
                );
              },
            ),
          ),
          SizedBox(height: 16),
          ElevatedButton(
            onPressed: _pickContacts,
            child: Text('选择联系人'),
          ),
        ],
      ),
    );
  }
}

注意事项

  1. 权限处理:在实际项目中,你可能需要更复杂的权限处理逻辑,特别是处理权限被拒绝的情况。
  2. 插件版本:确保你使用的是最新版本的flutter_native_contact_picker_plus插件,以获取最新的功能和修复。
  3. 平台差异:插件在不同平台上的行为可能有所不同,确保在iOS和Android上都进行了充分的测试。

以上代码示例展示了如何在Flutter中使用flutter_native_contact_picker_plus插件来选择联系人,并显示所选联系人的基本信息。

回到顶部