如何在下拉列表中显示名称而不是在 flutter 中的选定值中？

Question

这是我从 firebase 获取项目并显示在下拉列表中的代码。下拉值仅包含拨号代码。国旗和国家名称仅用于显示，不用于 firebase 中的进一步存储

   `import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/material.dart';
import 'package:stract/utils/custom_config.dart';

class DialCodeDropdown extends StatefulWidget {
  ValueNotifier dialCodeNotifier;
  DialCodeDropdown({required this.dialCodeNotifier});

  @override
  State<DialCodeDropdown> createState() => DialCodeDropdownState();
}

class DialCodeDropdownState extends State<DialCodeDropdown> {
  String dropdownvalue = "61";

  String urlImages = "";
  List<String> dialCode = [];
  List<String> countryCode = [];

  List<Map> codeAndImage = [];

  @override
  void initState() {
    print("Inside Init State");
    fetchDialCodeFromCollections();
    // dropdownvalue = dialCode.first;
    widget.dialCodeNotifier.value = dropdownvalue;

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 20,
      child: DropdownButton<String>(
        underline: SizedBox(),
        value: dropdownvalue,
        icon: VerticalDivider(
          color: Colors.black,
        ),
        items: codeAndImage.map((Map map) {
          return DropdownMenuItem<String>(
            value: map["dialCode"].toString(),
            child: Row(
              children: [
                Image.network(
                  map["image"],
                  width: 20,
                ),
                SizedBox(
                  width: 5,
                ),
                Text(map["country"].toString()),
                SizedBox(
                  width: 5,
                ),
                Text("+ ${map["dialCode"].toString()}"),
              ],
            ),
          );
        }).toList(),
        onChanged: (String? newValue) {
          print(newValue);
          setState(() {
            dropdownvalue = newValue!;
            widget.dialCodeNotifier.value = newValue;
          });
        },
      ),
    );
  }

  Future fetchImagesFromFirestore(path) async {
    try {
      await FirebaseStorage.instance
          .ref()
          .child(path)
          .getDownloadURL()
          .then((value) {
        setState(() {
          urlImages = value;
        });
      });
      return urlImages;
    } catch (e) {
      print(e.toString());
    }
  }

  Future<void> fetchDialCodeFromCollections() async {
    var data = await FirebaseFirestore.instance
        .doc("${CustomConfig.FS_MASTER_DATA}/CountryCodes")
        .get();
    data.exists
        ? {
            data.data()!.forEach((key, value) async {
              if (value["isActive"] == true) {
                await fetchImagesFromFirestore("/Country-Flags/$key.jpg")
                    .then((Element) {
                  setState(() {
                    codeAndImage.add({
                      "dialCode": value["DialCode"].toString(),
                      "country": value["Country"],
                      "image": Element.toString()
                    });
                  });
                });
                setState(() {
                  countryCode.add(key);

                  if (dialCode.contains(value["DialCode"]) != true)
                    dialCode.add(value["DialCode"]);
                });
              }
            })
          }
        : print("no data");
  }
}

`

输出如下： 但我想要以下输出..

如何实现？ （在下拉值中显示国家名称，但不在所选值中）

Answer 1

你可以用

selectedItemBuilder

来解决这个问题，

您的代码应如下所示

selectedItemBuilder

selectedItemBuilder: (context) =>codeAndImage.map((Map map) {
      return Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Image.network(
              map["image"],
              width: 20,
            ),
            SizedBox(
              width: 5,
            ),
            Text("+ ${map["dialCode"].toString()}"),
          ],
        );
    }).toList()