Flutter使用filter_list插件：如何将筛选列表嵌入容器而非新页面

你用的FilterListDelegate.show()方法本身就是设计成以新页面/弹窗形式展示筛选界面的，所以不管怎么在Container里调用这个方法，都会弹出新页面。要实现嵌入当前页面容器的效果，得用插件提供的FilterListWidget组件，而不是Delegate。

修改后的代码示例 #

直接把原来的异步调用逻辑替换成在Widget树中嵌入FilterListWidget：

List<SelectProjectData?> _selectProjectData = [];
List<SelectProjectData?> _selectedProjectData = [];

@override
Widget build(BuildContext context) {
  return Container(
    margin: EdgeInsets.all(10),
    padding: EdgeInsets.all(20),
    color: AppColor.WHITE,
    child: Column(
      children: [
        // 直接嵌入筛选列表组件
        FilterListWidget<SelectProjectData?>(
          listData: _selectProjectData,
          selectedListData: _selectedProjectData,
          onItemSearch: (user, query) {
            return user!.projectName!.toLowerCase().contains(query.toLowerCase());
          },
          tileLabel: (user) => user!.projectName,
          emptySearchChild: const Center(child: Text('Data not found')),
          // enableOnlySingleSelection: true,
          searchFieldHint: 'Search Here..',
          // 点击确认按钮后更新选中数据
          applyButtonText: '确认',
          onApplyButtonClick: (list) {
            setState(() {
              _selectedProjectData = list!;
            });
          },
          // 可选：添加重置按钮清空选中
          resetButtonText: '重置',
          onResetButtonClick: () {
            setState(() {
              _selectedProjectData = [];
            });
          },
        ),
      ],
    ),
  );
}

关键说明 #

• FilterListWidget是插件专门用于嵌入页面的组件，直接放在Container的子节点里就能在当前页面展示带搜索的筛选列表
• 参数和原来的FilterListDelegate基本对应，仅需把list改为listData，回调逻辑可以复用之前的状态更新代码
• 不需要再调用异步的openFilterDelegate()方法，组件会自动渲染在你指定的Container区域内

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