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

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

reactive_contact_picker 是一个围绕 fluttercontactpicker 构建的包装器，用于与 reactive_forms 结合使用。

目前文档还在编写中。您可以查看示例文件夹以获取样例代码。

示例代码

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

import 'package:reactive_forms/reactive_forms.dart';

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

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

  // 构建表单
  FormGroup buildForm() => fb.group({
        'input': FormControl<PhoneContact>(), // 控制器用于输入联系人信息
        'fullContact': FormControl<FullContact>(), // 控制器用于输入完整的联系人信息
      });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue), // 设置主题颜色
      home: Scaffold(
        appBar: AppBar(), // 应用栏
        body: SafeArea( // 安全区域
          child: SingleChildScrollView(
            physics: const BouncingScrollPhysics(), // 滚动效果
            padding: const EdgeInsets.symmetric(
              horizontal: 20.0,
              vertical: 20.0,
            ), // 内边距
            child: ReactiveFormBuilder(
              form: buildForm, // 表单构建器
              builder: (context, form, child) {
                return Column(
                  children: [
                    const SizedBox(height: 16), // 空间间隔
                    ReactivePhoneContactPicker<PhoneContact>(
                      formControlName: 'input', // 控制器名称
                      contactBuilder: (contact) { // 联系人构建器
                        if (contact == null) {
                          return const SizedBox(
                            width: double.infinity,
                            height: 60,
                            child: Center(
                              child: Text('tap to select contact'), // 提示文本
                            ),
                          );
                        }

                        return Column(
                          children: <Widget>[
                            const Text("Phone contact:"), // 联系人类型
                            Text("Name: ${contact.fullName}"), // 联系人姓名
                            Text(
                                "Phone: ${contact.phoneNumber!.number} (${contact.phoneNumber!.label})") // 联系人电话
                          ],
                        );
                      },
                    ),
                    const SizedBox(height: 16), // 空间间隔
                    ElevatedButton(
                      child: const Text('Sign Up'), // 按钮文本
                      onPressed: () {
                        if (form.valid) {
                          debugPrint(form.value.toString()); // 打印表单值
                        } else {
                          form.markAllAsTouched(); // 标记所有字段为已触碰
                        }
                      },
                    ),
                  ],
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


reactive_contact_picker 是一个用于 Flutter 的插件，它允许用户从设备的联系人列表中选择联系人。这个插件通常用于需要用户选择联系人的场景，例如在应用中发送消息、分享内容或保存联系人信息。

以下是如何在 Flutter 项目中使用 reactive_contact_picker 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 reactive_contact_picker 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  reactive_contact_picker: ^latest_version

然后，运行 flutter pub get 来安装插件。

2. 导入插件

在需要使用 reactive_contact_picker 的 Dart 文件中导入插件：

import 'package:reactive_contact_picker/reactive_contact_picker.dart';

3. 请求权限

在 Android 和 iOS 上，访问联系人需要用户授权。你需要请求读取联系人权限。可以使用 permission_handler 插件来请求权限：

import 'package:permission_handler/permission_handler.dart';

Future<void> requestContactPermission() async {
  final status = await Permission.contacts.request();
  if (status.isGranted) {
    // 权限已授予
  } else {
    // 权限未授予
  }
}

4. 选择联系人

使用 ReactiveContactPicker 提供的 pickContact 方法来选择联系人：

Future<void> pickContact() async {
  try {
    final Contact contact = await ReactiveContactPicker.pickContact();
    print('Selected contact: ${contact.displayName}');
    print('Phone number: ${contact.phones.first.number}');
  } catch (e) {
    print('Error picking contact: $e');
  }
}

5. 在 UI 中使用

你可以在按钮或其他 UI 元素上调用 pickContact 方法，以便用户可以选择联系人：

ElevatedButton(
  onPressed: () async {
    await requestContactPermission();
    await pickContact();
  },
  child: Text('Pick Contact'),
),

6. 处理联系人信息

当用户选择联系人后，你可以使用 Contact 对象来获取联系人的详细信息，例如姓名、电话号码、电子邮件等。

Contact contact = await ReactiveContactPicker.pickContact();
String name = contact.displayName;
String phoneNumber = contact.phones.isNotEmpty ? contact.phones.first.number : 'No phone number';
String email = contact.emails.isNotEmpty ? contact.emails.first.email : 'No email';

print('Name: $name');
print('Phone: $phoneNumber');
print('Email: $email');

7. 注意

  • Android: 需要在 AndroidManifest.xml 中添加以下权限：
<uses-permission android:name="android.permission.READ_CONTACTS"/>
  • iOS: 需要在 Info.plist 中添加以下键值对：
<key>NSContactsUsageDescription</key>
<string>需要访问您的联系人以便选择联系人</string>

8. 处理异常

在使用 reactive_contact_picker 时，可能会遇到权限被拒绝或其他异常情况。你需要适当地处理这些异常，以确保应用的稳定性。

try {
  final Contact contact = await ReactiveContactPicker.pickContact();
  // 处理联系人信息
} on PermissionDeniedException catch (e) {
  print('Permission denied: $e');
} on ContactPickerException catch (e) {
  print('Contact picker error: $e');
} catch (e) {
  print('Unknown error: $e');
}
回到顶部