更改下拉菜单中的文本颜色

Question

我在 Flutter 应用程序中使用 DropdownMenu。

          DropdownMenu<CurrencyPair>(
            width: 300,
            initialSelection: CurrencyPair.getById(store.currencyId),
            controller: TextEditingController(),
            // requestFocusOnTap is enabled/disabled by platforms when it is null.
            // On mobile platforms, this is false by default. Setting this to true will
            // trigger focus request on the text field and virtual keyboard will appear
            // afterward. On desktop platforms however, this defaults to true.
            requestFocusOnTap: false,
            onSelected: (CurrencyPair? currency) {
              store.currencyId = currency?.id ?? 0;
              store.setCurrencyIdByDefault(store.currencyId);
            },
            label: const Text('Currency pair'),
            dropdownMenuEntries: CurrencyPair.values
                .map<DropdownMenuEntry<CurrencyPair>>(
                    (CurrencyPair currency) {
                  return DropdownMenuEntry<CurrencyPair>(
                    value: currency,
                    label: currency.name,
                    style: MenuItemButton.styleFrom(
                      foregroundColor: const Color.fromARGB(255, 3, 1, 75).withOpacity(0.7),
                    ),
                  );
                }).toList(),
          ),

如你所见，我可以自定义dropdownMenuEntries，但是如何自定义下拉菜单的文本呢？

例如我想要 Colors.white 值

Answer 1

要更改 Flutter 中 DropdownMenu 字段中所选值的颜色，您需要自定义下拉字段本身的 TextStyle。这可以通过将 DropdownMenu 包装在主题小部件内并使用所需的 TextStyle 指定 DropdownMenuThemeData 来实现。

    Theme(
  data: Theme.of(context).copyWith(
    dropdownMenuTheme: DropdownMenuThemeData(
      textStyle: TextStyle(
        // Set the desired text color for the selected value
        color: const Color(0xFF03014B), 
        fontSize: 16, // You can adjust the font size if needed
      ),
    ),
  ),
  child: DropdownMenu<CurrencyPair>(
    width: 300,
    initialSelection: CurrencyPair.getById(store.currencyId),
    controller: TextEditingController(),
    requestFocusOnTap: false,
    onSelected: (CurrencyPair? currency) {
      store.currencyId = currency?.id ?? 0;
      store.setCurrencyIdByDefault(store.currencyId);
    },
    label: const Text('Currency pair'),
    dropdownMenuEntries: CurrencyPair.values.map<DropdownMenuEntry<CurrencyPair>>(
      (CurrencyPair currency) {
        return DropdownMenuEntry<CurrencyPair>(
          value: currency,
          label: currency.name,
          style: MenuItemButton.styleFrom(
            foregroundColor: const Color(0xFF03014B).withOpacity(0.7),
          ),
        );
      },
    ).toList(),
  ),
),