Flutter自定义AppBar标题DropdownButton：Material页面筛选样式异常

我之前也踩过这个坑！直接把DropdownButton塞到AppBar的title里，不仅会出现突兀的下划线，颜色也很难对齐Material规范的要求。结合你的需求，我整理了一套能完美适配的方案：

核心解决方向 #

• 移除DropdownButton默认下划线：通过覆盖组件属性消除多余装饰
• 统一白色视觉元素：自定义文本、图标颜色，匹配AppBar的白色主题

完整代码示例 #

AppBar(
  backgroundColor: Colors.indigo, // 可替换为你需要的AppBar背景色
  title: DropdownButton<String>(
    value: currentSelected,
    underline: SizedBox.shrink(), // 彻底去掉默认下划线
    style: TextStyle(color: Colors.white), // 设置选中项文本为白色
    iconEnabledColor: Colors.white, // 设置下拉箭头图标为白色
    items: <String>['全部页面', '我的页面', '收藏页面']
        .map<DropdownMenuItem<String>>((String option) {
      return DropdownMenuItem<String>(
        value: option,
        child: Text(
          option,
          style: TextStyle(color: Colors.white), // 确保下拉列表项也是白色
        ),
      );
    }).toList(),
    onChanged: (String? newOption) {
      // 处理筛选逻辑
      setState(() {
        currentSelected = newOption!;
      });
    },
  ),
)

关键细节说明 #

• underline: SizedBox.shrink()：直接移除DropdownButton自带的下划线，避免破坏AppBar的简洁视觉结构，完全贴合Material设计的规范
• 双层白色样式设置：既要给DropdownButton本身设置style，也要给每个DropdownMenuItem里的Text单独设置白色，保证下拉展开后的选项也能保持统一的白色视觉
• iconEnabledColor：把下拉箭头的颜色同步改成白色，让整个筛选控件和AppBar的白色元素（比如返回键、操作按钮）风格一致

这样调整后，DropdownButton就能完美充当AppBar的筛选标题，既符合页面筛选的设计理念，也不会出现怪异的样式问题啦～

内容的提问来源于stack exchange，提问作者James Gilchrist