Remove highlight color in trailingIcon DropdownMenu Flutter

29 views Asked by At

I'm building a dropdown in Flutter. I started using DropdownMenu because DropdownButton styling didn't worked as desired.

DropdownMenu done

This is thhe Dropdown so far, but have some concerns:

  • When tapping the trailing icon, it shows a highlight:

problem

  • I read a lot of github posts but didn't found anything related to disabling that feature. Reading dropdown_menu.dart I found that it is a IconButton, but it doesn't give any way to change that atrt
final Widget trailingButton = Padding(
    padding: const EdgeInsets.all(4.0),
    child: IconButton(
        isSelected: controller.isOpen,
        icon: widget.trailingIcon ?? const Icon(Icons.arrow_drop_down),
        selectedIcon: widget.selectedTrailingIcon ?? const Icon(Icons.arrow_drop_up),
        onPressed: () {
          handlePressed(controller);
        },
        ),
    );

This is my dropdown widget code:

import 'package:flutter/material.dart';
import 'package:k/style/app_color_schemes.dart';

class PrivacyDropdownBtn extends StatefulWidget {
  const PrivacyDropdownBtn({super.key});

  @override
  State<PrivacyDropdownBtn> createState() => _PrivacyDropdownBtnState();
}

class _PrivacyDropdownBtnState extends State<PrivacyDropdownBtn> {
  static const List<String> optionsList = <String>[
    'Anyone',
    'Option 1',
    'Option 2',
  ];

  String dropdownValue = optionsList.first;
  @override
  Widget build(BuildContext context) {
    Color color = Brightness.light == Theme.of(context).brightness
        ? LightColorScheme.surfaceContainer
        : Colors.black;
    return DropdownMenu<String>(
      initialSelection: dropdownValue,
      width: 120,
      textStyle: TextStyle(fontSize: 12),
      menuStyle: MenuStyle(
        backgroundColor: MaterialStateProperty.all<Color>(color),
        elevation: MaterialStateProperty.all<double>(0),
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          const RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
                bottom: Radius.circular(10)),
          ),
        ),
      ),
      inputDecorationTheme: InputDecorationTheme(
          isDense: true,
          filled: true,
          fillColor: color,
          contentPadding:
              const EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
          constraints: BoxConstraints.tight(const Size.fromHeight(40)),
          border: const OutlineInputBorder(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10.0),
              topRight: Radius.circular(10.0),
            ),
            borderSide: BorderSide.none,
          )),
      onSelected: (String? newValue) {
        setState(() {
          dropdownValue = newValue!;
        });
      },
      dropdownMenuEntries:
          optionsList.map<DropdownMenuEntry<String>>((String value) {
        return DropdownMenuEntry<String>(
          value: value,
          label: value,
          style: ButtonStyle(
            overlayColor: MaterialStateProperty.all(Colors.transparent),
            padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
                const EdgeInsets.symmetric(horizontal: 10)),
            backgroundColor: MaterialStateProperty.all<Color>(color),
            textStyle: MaterialStateProperty.all<TextStyle>(
                TextStyle(color: color, fontSize: 12)),
          ),
        );
      }).toList(),
    );
  }
}

Thank you for any help!

PD: If anyone knows how to change the size of the DropdownMenyEntry items or removing the next lines of the dropdown I'll appreciate it!

extra problem

0

There are 0 answers