flutter

How to reduce the clickable area of the trailing icon in Flutter DropdownMenu


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?


Solution

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