Flutter联系人选择插件flutter_native_contact_picker_plus的使用
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()), // 将每个联系人转换为字符串并显示
)
],
),
),
),
);
}
}
说明
- 导入依赖:首先需要在
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
更多关于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('选择联系人'),
),
],
),
);
}
}
注意事项
- 权限处理:在实际项目中,你可能需要更复杂的权限处理逻辑,特别是处理权限被拒绝的情况。
- 插件版本:确保你使用的是最新版本的
flutter_native_contact_picker_plus
插件,以获取最新的功能和修复。 - 平台差异:插件在不同平台上的行为可能有所不同,确保在iOS和Android上都进行了充分的测试。
以上代码示例展示了如何在Flutter中使用flutter_native_contact_picker_plus
插件来选择联系人,并显示所选联系人的基本信息。