I'm using the animated_custom_dropdown library version 3.1.1.
I've run into this problem:
By default, CustomDropdown comes with a transparent padding or border on the left and right sides.
Without adding any decoration:
CustomDropdown<String>(
hintText: 'Seleccionar categoría',
items:
_categoryItems
.map((e) => e.description ?? 'Sin nombre')
.toList(),
initialItem:
_categoryItems
.firstWhere(
(e) => e.id == _selectCategory,
orElse: () => _categoryItems.first,
)
.description ??
'Sin nombre',
onChanged: (value) {
final selected = _categoryItems.firstWhere(
(e) => e.description == value,
);
setState(() => _selectCategory = selected.id);
debugPrint('cambiando valor a: $value');
},
),
It is shown like this
And if I add a decoration: with the
closedFillColor: Colors.transparent,
decoration: CustomDropdownDecoration(
expandedBorder: Border.all(
color: Theme.of(context).primaryColor,
),
closedFillColor: Colors.transparent,
expandedFillColor: Colors.white,
closedSuffixIcon: const Icon(Icons.keyboard_arrow_down),
expandedSuffixIcon: const Icon(Icons.keyboard_arrow_up),
),
It looks like this:
Enter image description here
But what if I add a
closedBorder: Border.all(color: Colors.grey.shade400),
and I changed closedFillColor from transparent to white, so now it looks like this:
I'm not very familiar with the library. What I want is to remove that border or padding so that the Expanded field occupies the entire space. Thank you very much.