如何在 DropdownMenuItem 颤动上添加模糊

Question

我需要在项目的下拉列表中添加模糊。 但我无法添加模糊效果，因为我不知道在哪里做。 看起来唯一的选择是使用 BackdropFilter，但我没有可以应用此效果的容器。 告诉我如何在 DropdownMenuItem 上添加模糊？

代码

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

您可以使用 BackDropFilter 来模糊 DropdownListItems 子项。 并有条件地在第一个和最后一个项目上添加圆角边框。