The argument type 'List<Contact>?' can't be assigned to the parameter type 'List<MultiSelectItem<dynamic>>'

Question

I am trying to test flutter_contacts library. I am willing to build a view where the user can select several contacts and display each of them in a chip when selected. My problem is that I have List Contact. But for the multiselect, I must provide a List<MultiSelectItem>. Please, do you know if I can convert my List Contact into List<MultiSelectItem>.

Many thanks.

import 'package:flutter/material.dart';
import 'package:flutter_contacts/flutter_contacts.dart';
import 'package:multi_select_flutter/bottom_sheet/multi_select_bottom_sheet_field.dart';
import 'package:multi_select_flutter/chip_display/multi_select_chip_display.dart';

void TEST() => runApp(const FlutterContactsExample());

final _multiSelectKeyContext = GlobalKey<FormFieldState>();

class FlutterContactsExample extends StatefulWidget {
  const FlutterContactsExample({Key? key}) : super(key: key);

  @override
 State<FlutterContactsExample>  createState() => _FlutterContactsExampleState();

}

class _FlutterContactsExampleState extends State<FlutterContactsExample> {
  List<Contact>? _contacts;
  bool _permissionDenied = false;
  late List<bool> isChecked;

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

  Future _fetchContacts() async {
    if (!await FlutterContacts.requestPermission(readonly: true)) {
      setState(() => _permissionDenied = true);
    } else {
      final contacts = await FlutterContacts.getContacts();
      setState(() => _contacts = contacts);
    }
  }

  @override
  Widget build(BuildContext context) => MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: const Text('flutter_contacts_example')),
          body: Column(
            children: [
              _body(),

              ///MultiSelect for Context
              MultiSelectBottomSheetField(
                key: _multiSelectKeyContext,
                initialChildSize: 0.7,
                maxChildSize: 0.95,
                title: const Text("Context", style: TextStyle(fontSize: 19),),
                buttonText: const Text(
                  "Context", style: TextStyle(fontSize: 19),),
                searchTextStyle: const TextStyle(fontSize: 19),
                searchHintStyle: const TextStyle(fontSize: 19),
                itemsTextStyle: const TextStyle(fontSize: 19),
                items: _contacts,
                searchable: true,
                onConfirm: (valueContext) {
                  setState(() {
                    _contextSelected = valueContext;
                    print('mon test ligne 152');
                    print(_contextSelected);
                  });
                  _multiSelectKeyContext.currentState!.validate();

                },
                chipDisplay: MultiSelectChipDisplay(
                  textStyle: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold,fontSize: 19),
                  onTap: (dynamic item) {
                    setState(() {
                    });
                    _multiSelectKeyContext.currentState!.validate();
                  },
                ),
              ),
              const SizedBox(height: 40),
            ],
          )));

  Widget _body() {
    if (_permissionDenied) return const Center(child: Text('Permission denied'));
    if (_contacts == null) return const Center(child: CircularProgressIndicator());
    return ListView.builder(
        itemCount: _contacts!.length,
        itemBuilder: (context, i) => ListTile(
            title: (Text(_contacts![i].displayName)),
           
            onTap: () async {
              final fullContact =
              await FlutterContacts.getContact(_contacts![i].id);
              await Navigator.of(context).push(
                  MaterialPageRoute(builder: (_) => ContactPage(fullContact!)));
            }
         )
    );
  }
}

class ContactPage extends StatelessWidget {
  final Contact contact;
   const ContactPage(this.contact, {Key? key}) : super(key: key);

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

Answer 1

In MultiSelectBottomSheetField instead of

items: _contacts,

you should write it like this:

items: _contacts.map((e) => MultiSelectItem(e, e.name)).toList(),

as shown here: link to example .

Because as the error you got and documentation both says, it needs List<MultiSelectItem<V>> here and you gave it List<Contact>?