Flutter中如何设计实现筛选器？相关组件、插件及学习资源求助

原生组件实现方案 #

Flutter自带的基础组件已经可以覆盖绝大多数筛选场景，无需引入第三方依赖就能实现你示例中的效果：

• 标签类单选/多选筛选：使用ToggleButtons或ChoiceChip+Wrap组合，配置选中状态回调即可实现点击切换效果，支持自定义圆角、背景色、边框样式，和截图中的设计效果匹配度很高
• 下拉选项筛选：使用DropdownButton或PopupMenuButton，适合单维度选项较多的筛选场景，点击弹出选择列表
• 数值/日期区间筛选：使用RangeSlider配合输入框，即可实现价格、时间等区间的选择逻辑

第三方封装插件 #

如果想要减少自定义代码量，可以选用成熟的社区插件：

• flutter_filter_dialog：封装好了多维度筛选弹窗，支持单选、多选、区间筛选等多种内置模式，仅需修改样式配置就能匹配设计需求
• filter_list：轻量级筛选列表组件，内置搜索、全选等功能，适合筛选条件较多的全屏筛选页

基础示例代码 #

以下是标签单选筛选的最简实现代码：

import 'package:flutter/material.dart';

class FilterDemo extends StatefulWidget {
  const FilterDemo({super.key});

  @override
  State<FilterDemo> createState() => _FilterDemoState();
}

class _FilterDemoState extends State<FilterDemo> {
  // 筛选选项列表
  final List<String> _filterOptions = ["全部", "热销", "新品", "折扣", "预售"];
  // 选中状态标记，默认选中第一个
  final List<bool> _selectedStatus = List.generate(5, (index) => index == 0);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
      child: ToggleButtons(
        isSelected: _selectedStatus,
        borderRadius: BorderRadius.circular(20),
        fillColor: Colors.blueAccent,
        selectedColor: Colors.white,
        color: Colors.black87,
        borderColor: Colors.grey.shade300,
        selectedBorderColor: Colors.blueAccent,
        splashColor: Colors.transparent,
        onPressed: (index) {
          setState(() {
            // 单选逻辑：仅保留当前点击项为选中状态
            for (int i = 0; i < _selectedStatus.length; i++) {
              _selectedStatus[i] = i == index;
            }
            // 此处编写筛选后的列表刷新逻辑
          });
        },
        children: _filterOptions.map((option) {
          return Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
            child: Text(option),
          );
        }).toList(),
      ),
    );
  }
}

自定义优化技巧 #

如果需要实现自动换行的多行列标签筛选，可以把ToggleButtons替换为Wrap组件包裹多个ChoiceChip，根据selected属性控制选中样式，交互自定义空间更大。

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