我想在flutter中创建这样的弹出菜单

Question

我想创建弹出菜单，显示在按钮下方，并且还具有渐变颜色，中间项有粗体，字体为粗体，可以在其周围滚动，

我希望这是有道理的。我想要如图所示的样子

我尝试使用 PopupMenuButton 创建，但我认为不可能有渐变背景、边框和粗体字体

Answer 1

我之前为自己的项目设计了一个自定义下拉菜单。您可以在以下要点 URL 中找到它的代码。您可以复制此代码并修改必要的部分以满足您的需求。此外，我还提供了一个示例，说明如何在导入此代码后在项目中使用该代码：

CustomDropdown<int>(
  hideIcon: true,
  onChange: (int value, int index) => print(value),
  dropdownButtonStyle: const DropdownButtonStyle(
    width: 170,
    height: 40,
    elevation: 1,
    backgroundColor: Colors.white,
    primaryColor: Colors.black87,
  ),
  dropdownStyle: DropdownStyle(
    borderRadius: BorderRadius.circular(20),
    elevation: 6,
    color: Colors.grey.withOpacity(0.1),
    padding: const EdgeInsets.all(5),
  ),
  items: [
     'item 1',
     'item 2',
     'item 3',
     'item 4',
     'item 5',
     'item 6',
     'item 7',
     'item 8',
     'item 9',
  ]
   .asMap()
   .entries
   .map((item) => DropdownItem<int>(
     value: item.key + 1,
     child: Padding(
     padding: const EdgeInsets.all(8.0),
     child: Text(
       item.value,
       textAlign: TextAlign.center,
       style: TextStyle(fontWeight: FontWeight.w700),
     ),
  ),
 ),
).toList(),
  child: const Row(
    children: [
     Icon(Icons.filter_list),
     Text('dropdown'),
    ],
  ),
)

我看到你的示例图片有磨砂玻璃背景。通过此 custom_dropdown，您还可以使项目的背景变成磨砂效果。只需给你的背景颜色一些不透明度，比如

Colors.white.withOpacity(0.5)

。如果你不想要磨砂背景，就不要使用不透明度。