Flutter数据过滤插件data_filters的使用

Flutter数据过滤插件data_filters的使用

特性

• 将您的现有数据转换为过滤器。

示例代码

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<String>> 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&lt;int&gt;? 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,
              ),
            ),
          ),
          ],
          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(
                        // crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          for (var j = 0; j &lt; data[i].length; j++)
                            Text(
                              '${titles[j]} :\t ${data[i][j]}\t\t\t\t\t\t',
                            )
                        ],
                      ),
                    ),
                  );
                }
                return SizedBox();
              },
            ),
          ),
        ],
      ),
    );
  }
}

使用说明

1. 数据准备：

   • 确保您的数据列表 data 和标题列表 titles 按照示例中的格式排列。

   • 示例数据和标题如下：

     List<List> data = [
       ['red', 'dog', 'small', 'bark', 'pet'],
       ['green', 'cat', 'medium', 'meow', 'stray'],
       ['blue', 'fish', 'large', 'swim', 'pet'],
       // 更多数据...
     ];
     
     List<String> titles = ['Color', 'Animal', 'Size', 'Sound', 'Type'];
     

2. 过滤器构建：

• 使用 DataFilters 构建过滤器界面。传递 data 和 titles 到 DataFilters，并设置其他样式选项如 showAnimation、recent_selected_data_index 和 style。

DataFilters(
  data: data,
  filterTitle: titles,
  showAnimation: true,
  recent_selected_data_index: (List<int>? index) {
    setState(() {
      filterIndex = index;
    });
  },
  style: FilterStyle(
    buttonColor: Colors.green,
    buttonColorText: Colors.white,
    filterBorderColor: Colors.grey,
  ),
),

1. 结果展示：
   • 过滤后的数据将显示在列表视图中。如果 filterIndex 包含当前索引，则显示该行的数据。

Expanded(
  child: ListView.builder(
    itemCount: data.length,
    itemBuilder: (ctx, i) {
      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(
              // crossAxisAlignment: CrossAxisAlignment.start,
              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();
    },
  ),
),