Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Change text color in dropdown menu

I’m using DropdownMenu in my Flutter app.

          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(),
          ),

As you could see, I can customize dropdownMenuEntries, but how can I customize text of Dropdown menu?

enter image description here

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

For example I want Colors.white value

>Solution :

To change the color of the selected value in the DropdownMenu field in Flutter, you’ll need to customize the TextStyle of the dropdown field itself. This can be achieved by wrapping the DropdownMenu inside a Theme widget and specifying the DropdownMenuThemeData with the desired TextStyle.

    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(),
  ),
),
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading