如何在Flutter中添加如图所示的筛选选项按钮（无需搜索栏）

你可以用Flutter自带的PopupMenuButton组件快速实现这种带下拉选项的筛选按钮，以下是完整示例代码：

import 'package:flutter/material.dart';

void main() => runApp(const FilterButtonDemo());

class FilterButtonDemo extends StatelessWidget {
  const FilterButtonDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('筛选示例'),
          actions: [
            // 筛选按钮
            FilterButton(
              onFilterSelected: (filter) {
                // 处理选中的筛选逻辑
                debugPrint('选中了：$filter');
              },
            ),
          ],
        ),
      ),
    );
  }
}

class FilterButton extends StatefulWidget {
  final Function(String) onFilterSelected;

  const FilterButton({super.key, required this.onFilterSelected});

  @override
  State<FilterButton> createState() => _FilterButtonState();
}

class _FilterButtonState extends State<FilterButton> {
  String _selectedFilter = '全部';

  final List<String> _filterOptions = [
    '全部',
    '未完成',
    '已完成',
    '已逾期'
  ];

  @override
  Widget build(BuildContext context) {
    return PopupMenuButton<String>(
      // 按钮显示的内容：图标+选中的筛选文本
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Icon(Icons.filter_alt_outlined),
            const SizedBox(width: 4),
            Text(_selectedFilter),
            const Icon(Icons.keyboard_arrow_down),
          ],
        ),
      ),
      // 弹出的选项列表
      itemBuilder: (context) => _filterOptions.map((option) {
        return PopupMenuItem(
          value: option,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(option),
              if (option == _selectedFilter)
                const Icon(Icons.check, color: Colors.blue),
            ],
          ),
        );
      }).toList(),
      // 选中选项后的回调
      onSelected: (value) {
        setState(() {
          _selectedFilter = value;
        });
        widget.onFilterSelected(value);
      },
    );
  }
}

关键说明： #

• 基于PopupMenuButton实现下拉弹窗逻辑，无需额外依赖包
• 自定义按钮外观，组合图标与选中的筛选文本，匹配截图样式
• 选中选项后自动更新按钮显示文本，并通过回调传递选中结果
• 给已选中的选项添加勾选标记，提升交互体验

内容的提问来源于stack exchange，提问作者Ishan Vithanage