Multi Contact Picker #

A highly customisable Flutter widget to read multiple contacts on Android and iOS including contact permission handling. Please note this package will not work on simulators

Get started #

Installation #

iOS: Add the following key/value pair to your app's Info.plist

<plist version="1.0">
<dict>
    ...
    <key>NSContactsUsageDescription</key>
    <string>Reason we need access to the contact list</string>
</dict>
</plist>

Android: Add the following <uses-permissions> tags to your app's AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android" ...>
    <uses-permission android:name="android.permission.READ_CONTACTS"/>
    <uses-permission android:name="android.permission.WRITE_CONTACTS"/>
    <application ...>
    ...

Usage #

Multi contact can be used in two forms, as a fullscreen dialog or as a standalone screen. My personal preference is a fullscreen dialog.

1. Fullscreen dialog

showDialog(
  context: context,
  barrierDismissible: false,
  builder: (BuildContext context) {
    //Customise the MultiContactPicker to your liking
    return  MultiContactPicker();
  }).then((value) {
    if (value != null){
      debugPrint(value);
    }
  });

2. Material Page

Navigator.push(context,
  MaterialPageRoute(
  builder: (_) => MultiContactPicker()))
  .then((value) {
    if (value != null) {
      // List of selected contacts will be returned to you
      debugPrint(value);
    }
});

Advanced Example #

  showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return MultiContactPicker(
          appBar: AppBar(
            title: const Text("Contact Picker"),
          ),
          floatingActionButton: const CircleAvatar(
            backgroundColor: Colors.blue,
            child: Icon(Icons.check),
          ),
          loader: const CircularProgressIndicator(),
          error: (permission) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                const Text(
                  "Error trying to get contacts",
                  textAlign: TextAlign.center,
                ),
                Text(
                  permission.toString(),
                  textAlign: TextAlign.center,
                ),
              ],
            );
          },
          emptyState: const Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                "No contacts to display",
                textAlign: TextAlign.center,
              )
            ],
          ),
          contactBuilder: (context, contact, selected) {
            return ListTile(
              title: Text(contact.displayName.toString()),
              trailing: Checkbox(
                activeColor: Colors.blue,
                checkColor: Colors.white,
                onChanged: (value) {},
                value: selected,
              ),
            );
          },
        );
      }).then((value) {
        if (value != null) {
          // Returns a List<Contact>
          debugPrint(value.toString());
        }
    },
);