Visualizzare i contatti in Flutter con flutter_contacts

flutter_contacts è un package per Flutter che ci consente di visualizzare (e anche gestire volendo) i contatti nelle nostre Flutter app.

Come prima cosa bisogna impostare i permessi.

Se usate Android (io l'ho testato solo qui) aggiungete almeno questo al manifest:

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

Adesso installiamo il package:

flutter pub add flutter_contacts

Poi creiamo un widget per il contatto singolo:

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

class ContattoWidget extends StatelessWidget {
  final Contact contatto;

  const ContattoWidget(this.contatto, {super.key});

  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(title: Text(contatto.displayName)),
    body: Column(
      children: [
        Text('Nome: ${contatto.name.first}'),
        Text('Cognome: ${contatto.name.last}'),
        Text('Numero: ${contatto.phones.isNotEmpty ? contatto.phones.first.number : '(none)'}'),
        Text('Email: ${contatto.emails.isNotEmpty ? contatto.emails.first.address : '(none)'}'),
      ],
    ),
  );
}

Questo è quello che apparirà quando cliccheremo su una voce della lista.

Questa la nostra schermata:

import 'package:flutter/material.dart';
import 'package:flutter_contacts/flutter_contacts.dart';
import 'package:test_flutter/ContattoWidget.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Contact>? _contatti;
  bool _permessi = false;

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

  Future _getContatti() async {
    if (!await FlutterContacts.requestPermission(readonly: true)) {
      setState(() => _permessi = true);
    } else {
      final contacts = await FlutterContacts.getContacts();
      setState(() => _contatti = contacts);
    }
  }

  Widget _body() {
    if (_permessi) {
      return const Center(
        child: Text('Permesso negato'),
      );
    }

    if (_contatti == null) {
      return const Center(
        child: CircularProgressIndicator(),
      );
    }

    return ListView.builder(
      itemCount: _contatti!.length,
      itemBuilder: (context, i) => ListTile(
        title: Text(_contatti![i].displayName),
        onTap: () async {
          final fullContact =
              await FlutterContacts.getContact(_contatti![i].id);
          await Navigator.of(context).push(
              MaterialPageRoute(builder: (_) => ContattoWidget(fullContact!)));
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: _body(),
    );
  }
}

Quando avvierete l'app vi verrà chiesto il permesso di accedere ai contatti.

Enjoy!