How to add blur on DropdownMenuItem flutter

Question

I need to add a blur to the drop-down list of items. But I can't add the blur effect as I don't understand where to do it. It looks like the only option is to use the BackdropFilter, but I don't have a container on which I can apply this effect. Tell me how to add blur on DropdownMenuItem?

code

return Container(
      width: 150,
      height: 28,
      padding: const EdgeInsets.symmetric(horizontal: 10),
      decoration: BoxDecoration(
        color: constants.Colors.greyDark.withOpacity(0.9),
        border: Border.all(color: constants.Colors.green),
        borderRadius: BorderRadius.circular(15),
      ),
      child: DropdownButtonHideUnderline(
        child: DropdownButton2(
          offset: const Offset(-5, -5),
          items: items.entries
              .map(
                (entry) => DropdownMenuItem(
                  value: entry.key,
                  child: Container(
                    decoration: const BoxDecoration(color: Colors.transparent),
                    child: Row(
                      children: [
                        SizedBox(
                          width: 33,
                          child: FittedBox(
                            child: Text(
                              entry.key.toUpperCase(),
                              style: entry.value == 'Closed'
                                  ? constants.Styles.tinyHeavyTextStyleRed
                                  : constants.Styles.tinyHeavyTextStyleGreen,
                              textAlign: TextAlign.end,
                            ),
                          ),
                        ),
                        const SizedBox(width: 11),
                        FittedBox(
                          child: Text(entry.value,
                              style: entry.value == 'Closed'
                                  ? constants.Styles.tinyBookTextStyleRed
                                  : constants.Styles.tinyBookTextStyleWhite),
                        ),
                      ],
                    ),
                  ),
                ),
              )
              .toList(),
          onChanged: (value) {
            setState(() {
              selectedValue = value as String;
            });
          },
          hint: Row(
            children: [
              FittedBox(
                child: Text(
                  status,
                  style: status == 'Closed'
                      ? constants.Styles.tinyHeavyTextStyleRed
                      : constants.Styles.tinyHeavyTextStyleGreen,
                ),
              ),
              const SizedBox(width: 3),
              Container(
                width: 3,
                height: 3,
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: constants.Colors.white,
                ),
              ),
              const SizedBox(width: 5),
              FittedBox(
                child: Text(
                  time,
                  style: constants.Styles.tinyBookTextStyleWhite,
                ),
              ),
            ],
          ),
          icon: SvgPicture.asset(constants.Assets.arrowDownDrop),
          iconOnClick: SvgPicture.asset(constants.Assets.arrowUpDrop),
          itemHeight: 20,
          dropdownMaxHeight: 191,
          dropdownWidth: 143,
          dropdownDecoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15),
            color: constants.Colors.greyDark.withOpacity(0.7),
          ),
        ),
      ),
    );

Answer 1

You can use BackDropFilter to blur your DropdownListItems child. and conditionally add rounded border on the first and to the last item.