Пользовательский раскрывающийся список Flutter

Question

Я заполняю DropDownButton списком объектов.

listДрузья

      [
   {
      "id":1,
      "name":"Name 1",
      "contact":"contact 1"
   },
   {
      "id":2,
      "name":"Name 2",
      "contact":"contact 2"
   },
   {
      "id":3,
      "name":"Name 3",
      "contact":"contact 3"
   }
]

Виджет DropDownButton

      DropdownButton<String>(
        isExpanded: true,
        hint: Text("Select Friend"),
        value: listFriends[0].name,
        onChanged: (String? newValue) {},
        items: listFriends.map<DropdownMenuItem<String>>((Friend value) {
          return DropdownMenuItem<String>(
            value: value.name,
            child: CustomCard(
              child: Padding(
                padding: EdgeInsets.all(10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Center(child: Text(value.id,),),
                    Center(child: Text(value.name),),
                    Center(child: Text(value.contact),),
                  ],
                ),
              ),
            ),
          );
        }).toList(),
      ),

Когда раскрывающийся список раскрывается, отображается список карточек с информацией о друзьях. Проблема в значении по умолчанию

значение: listFriends[0].name,

Я назначил имя (и я хочу отображать только имя, когда раскрывающийся список не раскрывается), но это показывает карту, которую я реализовал для DropdownMenuItem. Как мне показать только имя друга для выбранного раскрывающегося значения, и когда оно развернуто, он должен отображать список карточек.