I am using a DropdownMenu<String>
in Flutter and have added a custom trailingIcon
using Transform.translate
with an Icon
. Here is the relevant part of my code:
DropdownMenu<String>(
initialSelection: selectedPayrollDate,
controller: _payrollDateController,
key: Key('payrollDateField'),
enableFilter: true,
requestFocusOnTap: true,
enabled: !(isActivityTypeSelectedAll || isDisabledPayrollDate),
width: MediaQuery.of(context).orientation != Orientation.landscape
? MediaQuery.of(context).size.width * 0.40
: MediaQuery.of(context).size.width * 0.45,
menuHeight: MediaQuery.of(context).orientation == Orientation.landscape
? MediaQuery.of(context).size.height * 0.5
: 302,
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black, width: 2),
),
filled: true,
fillColor: !(isActivityTypeSelectedAll || isDisabledPayrollDate)
? Colors.white
: Colors.grey[350],
isDense: true,
constraints: BoxConstraints.tight(Size.fromHeight(40)),
contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
),
trailingIcon: Transform.translate(
offset: Offset(13, -13),
child: Icon(Icons.arrow_drop_down, size: 40),
),
selectedTrailingIcon: Transform.translate(
offset: Offset(13, -13),
child: Icon(Icons.arrow_drop_up, size: 40),
),
onSelected: (String? value) {
onChangeDLValue(value);
FocusScope.of(context).unfocus();
},
dropdownMenuEntries: postingDateList.map<DropdownMenuEntry<String>>((item) {
return DropdownMenuEntry<String>(
value: item['postingDate'],
label: '${item['postingDate']}',
style: ButtonStyle(
textStyle: WidgetStateProperty.all<TextStyle>(
TextStyle(fontSize: 14),
),
),
);
}).toList(),
);
The icon renders as expected, but I want to reduce its clickable area, so that taps outside the icon (within the padding/margin) don't trigger the dropdown. How can I restrict the icon’s tap target to just the visual icon itself?
Wrap your trailingIcon
widget with a SizedBox()
SizedBox(
height: 50,
width: 50,
child: Transform.translate(
offset: const Offset(13, -13),
child: const Icon(Icons.arrow_drop_down, size: 40),
),
),