Change style of selected option with singleSelect

[fete77]

Hello! First of all, it's really a great widget 👍🏼

I mainly use it for multi-dropdowns, but for uniform styling I want to use it for my single dropdown too. But here I can't find a way to style the selected option when using singleSelect: true.

The idea is, that I can style the single selected option as I want to, i.g. that it matches other input texts. I used the hintStyleproperty to match the style of my other inputs but I don't find any solution to change the input text of the dropdown when singleSelect: true.

Here, style of hintText in MultiDropdown matches the style of my TextFormField:

But if I select an option and singleSelect: true it looks odd:

MultiDropdown<String>(
        singleSelect: true,
        controller: dropdownController,
        items: dropdownValues,
        onSelectionChange: (value) {...},
        fieldDecoration: FieldDecoration(
          animateSuffixIcon: false,
          hintText: 'Bitte wählen',
          hintStyle: Theme.of(context).textTheme.bodyLarge!.copyWith(
                color: Theme.of(context).colorScheme.onSurfaceVariant,
              ),
          showClearIcon: true,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(4),
            borderSide: BorderSide(color: Theme.of(context).colorScheme.outline, width: 1),
          ),
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Theme.of(context).colorScheme.primary, width: 2),
          ),
        ),
        dropdownDecoration: DropdownDecoration(
          backgroundColor: Theme.of(context).colorScheme.surfaceContainer,
          borderRadius: BorderRadius.circular(4),
        ),
        dropdownItemDecoration: DropdownItemDecoration(
          selectedBackgroundColor: Theme.of(context).colorScheme.inversePrimary,
          selectedIcon: Icon(Icons.check_box, color: Theme.of(context).colorScheme.primary),
        ),
      ),

TextFormField(
        controller: textEditingController,
        textAlign: TextAlign.justify,
        decoration: InputDecoration(
          isDense: true,
          border: const OutlineInputBorder(),
          labelText:  'Beschreiben',
        ),
      ),

My suggestion is to add an inputStyle property in FieldDecoration to style the input or apply the ChipDecoration to the input even if singleSelect: true.

After spending so much time trying different things and running out of ideas, I was wondering if there is even a way to style a single select option? And if not, could you implement that somehow? That would be really great 🙂 .

I'm using v3.0.1.

[davidn9x]

The same problem! I can not bold text for selected display text with singleSelect.

[singgihmardianto]

Face the same problem here, also I think there is no option to modify the style of the search text. I am happy to contribute to fix this, is there a way to contribute? Thanks!

Oh for @davidn9x @fete77 in my case, for temporary fix I use maxSelections props. So if you want to have a single option with the style applied, just set the maxSelections to 1.