Flutter 颤振自定义下拉菜单项

我正在用对象列表填充下拉按钮

列表朋友 下拉按钮小部件

下拉按钮(
是的，
提示：文本（“选择朋友”），
值：listFriends[0]。名称，
onChanged:（字符串？newValue）{}，
项目：listFriends.map（（朋友值）{
返回下拉菜单项(
value:value.name，
孩子：海关卡(
孩子：填充(
填充：边缘设置。全部（10），
子：列(
crossAxisAlignment:crossAxisAlignment.stretch，
儿童：[
居中（子项：文本（value.id，），），
居中（子项：文本（value.name）），
居中（子项：文本（value.contact）），
],
),
),
),
);
}).toList（），
),

当下拉列表展开时，它将显示包含朋友信息的卡片列表。问题将作为默认值

值：listFriends[0]。名称

我分配了名称（我只想在下拉列表未展开时显示名称），但这显示了我为DropdownMenuItem实现的卡。如何仅显示所选下拉值的朋友姓名，当其展开时，应显示卡片列表

[
   {
      "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<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(),
      ),