I have created a package which lets you add filters to your existing page, here's how to integrate it.

Package: https://pub.dev/packages/data_filters

Github: https://github.com/hussainint/DataFilters

Video: https://github-production-user-asset-6210df.s3.amazonaws.com/48062618/239458630-5ff0dcb1-2e9a-4d5e-9cb4-a1a93a131162.mp4

Add this to pubspec.yaml

dependencies:

data_filters: 1.0.1

Selected filters will be stored in form of index

List<int>? filterIndex;

Your main data and title must be arranged like below.

List<List> data = [
    ['red', 'dog', 'small', 'bark', 'pet'],
    ['green', 'cat', 'medium', 'meow', 'stray'],
    ['blue', 'fish', 'large', 'swim', 'pet'],
    ['red', 'cat', 'small', 'meow', 'stray'],
    ['yellow', 'dog', 'large', 'bark', 'pet'],
    ['green', 'fish', 'medium', 'swim', 'pet'],
    ['blue', 'dog', 'medium', 'bark', 'pet'],
    ['red', 'fish', 'large', 'swim', 'pet'],
    ['yellow', 'cat', 'small', 'meow', 'pet'],
    ['green', 'dog', 'small', 'bark', 'pet'],
    ['blue', 'cat', 'large', 'meow', 'pet'],
    ['red', 'fish', 'medium', 'swim', 'stray'],
    ['yellow', 'dog', 'medium', 'bark', 'pet'],
    ['green', 'fish', 'large', 'swim', 'stray'],
    ['blue', 'cat', 'small', 'meow', 'pet'],
    ['red', 'dog', 'small', 'bark', 'stray'],
    ['yellow', 'cat', 'medium', 'meow', 'pet'],
    ['green', 'fish', 'small', 'swim', 'stray'],
    ['blue', 'dog', 'large', 'bark', 'pet'],
    ['pink', 'cat', 'medium', 'meow', 'pet'],
  ];

List<String> titles = ['Color', 'Animal', 'Size', 'Sound', 'Type'];

To Build Filters for the above data,

          DataFilters(
            data: data,

            /// pass_your_filter_title_here
            filterTitle: titles,

            /// enable_animation
            showAnimation: true,

            /// get_list_of_index_of_selected_filter
            recent_selected_data_index: (List<int>? index) {
              setState(() {
                filterIndex = index;
              });
            },

            /// styling
            style: FilterStyle(
              buttonColor: Colors.green,
              buttonColorText: Colors.white,
              filterBorderColor: Colors.grey,
            ),
          ),

And that's how simple it is to build filters for your data. You can display the selected data from the indexes stored in filterIndex variable.

Full Example Code:

import 'package:data_filters/data_filters.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Data Filters',
      // theme: ThemeData(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<List> data = [
    ['red', 'dog', 'small', 'bark', 'pet'],
    ['green', 'cat', 'medium', 'meow', 'stray'],
    ['blue', 'fish', 'large', 'swim', 'pet'],
    ['red', 'cat', 'small', 'meow', 'stray'],
    ['yellow', 'dog', 'large', 'bark', 'pet'],
    ['green', 'fish', 'medium', 'swim', 'pet'],
    ['blue', 'dog', 'medium', 'bark', 'pet'],
    ['red', 'fish', 'large', 'swim', 'pet'],
    ['yellow', 'cat', 'small', 'meow', 'pet'],
    ['green', 'dog', 'small', 'bark', 'pet'],
    ['blue', 'cat', 'large', 'meow', 'pet'],
    ['red', 'fish', 'medium', 'swim', 'stray'],
    ['yellow', 'dog', 'medium', 'bark', 'pet'],
    ['green', 'fish', 'large', 'swim', 'stray'],
    ['blue', 'cat', 'small', 'meow', 'pet'],
    ['red', 'dog', 'small', 'bark', 'stray'],
    ['yellow', 'cat', 'medium', 'meow', 'pet'],
    ['green', 'fish', 'small', 'swim', 'stray'],
    ['blue', 'dog', 'large', 'bark', 'pet'],
    ['pink', 'cat', 'medium', 'meow', 'pet'],
  ];

  List<String> titles = ['Color', 'Animal', 'Size', 'Sound', 'Type'];

  List<int>? filterIndex;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animals App'),
        backgroundColor: Colors.black,
        foregroundColor: Colors.white,
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Padding(
            padding: EdgeInsets.all(12.0),
            child: Text(
              'Filters',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.w700,
              ),
            ),
          ),

          ///
          /// This widget builds filters
          DataFilters(
            data: data,

            /// pass your filter title here
            filterTitle: titles,

            /// enable animation
            showAnimation: true,

            /// get list of index of selected filter
            recent_selected_data_index: (List<int>? index) {
              setState(() {
                filterIndex = index;
              });
            },

            /// styling
            style: FilterStyle(
              buttonColor: Colors.green,
              buttonColorText: Colors.white,
              filterBorderColor: Colors.grey,
            ),
          ),

          const Padding(
            padding: EdgeInsets.all(12.0),
            child: Text(
              'Result / Data',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.w700,
              ),
            ),
          ),

          /// Display your data
          ///
          ///
          Expanded(
            child: ListView.builder(
              itemCount: data.length,
              itemBuilder: (ctx, i) {
                /// filterIndex must be null initially
                if (filterIndex == null || filterIndex!.contains(i)) {
                  return Container(
                    margin: const EdgeInsets.all(10),
                    padding: const EdgeInsets.all(10),
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Colors.grey,
                      ),
                    ),
                    child: Center(
                      child: Wrap(
                        children: [
                          for (var j = 0; j < data[i].length; j++)
                            Text(
                              '${titles[j]} :\t ${data[i][j]}\t\t\t\t\t\t',
                            )
                        ],
                      ),
                    ),
                  );
                }
                return SizedBox();
              },
            ),
          ),
        ],
      ),
    );
  }
}