Flutter亚马逊风格筛选插件amazon_like

Flutter亚马逊风格筛选插件amazon_like_filter的使用

1. 整理后的内容中尽量提供关于“Flutter亚马逊风格筛选插件amazon_like_filter的使用”的完整示例demo

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

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

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

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Amazon like filter'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<AppliedFilterModel> applied = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(
          horizontal: 15,
          vertical: 10,
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Visibility(
              visible: applied.isNotEmpty,
              child: Padding(
                padding: const EdgeInsets.only(
                  bottom: 20,
                ),
                child: Text(
                  'Applied filters',
                  style: Theme.of(context).textTheme.titleLarge,
                ),
              ),
            ),
            ...applied
                .map((e) =&gt; ExpansionTile(
                    title: Text(e.filterTitle ?? '${e.filterKey.split('_')}'),
                    children: e.applied
                        .map((fil) =&gt; ListTile(
                              title: Text(fil.filterTitle),
                            ))
                        .toList(),
                  ),
                )
                .toList()
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          showModalBottomSheet(
            context: context,
            builder: (_) {
              return FilterWidget(
                filterProps: FilterProps(
                  onFilterChange: (value) {
                    setState(() {
                      applied = value;
                    });
                    print('Applied filer - ${value.map((e) =&gt; e.toMap())}');
                  },
                  filters: const [
                    FilterListModel(
                      filterOptions: [
                        FilterItemModel(filterTitle: 'Education', filterKey: 'education'),
                        FilterItemModel(filterTitle: 'Information Technology', filterKey: 'it'),
                        FilterItemModel(filterTitle: 'Sports', filterKey: 'sports'),
                        FilterItemModel(filterTitle: 'Transport', filterKey: 'transport'),
                      ],
                      previousApplied: [],
                      title: 'Industry',
                      filterKey: 'industry',
                    ),
                    FilterListModel(
                      filterOptions: [
                        FilterItemModel(filterTitle: 'Utter Pradesh', filterKey: 'up'),
                        FilterItemModel(filterTitle: 'Madhya Pradesh', filterKey: 'mp'),
                        FilterItemModel(filterTitle: 'Hariyana', filterKey: 'hr'),
                        FilterItemModel(filterTitle: 'Bihar', filterKey: 'bihar'),
                      ],
                      previousApplied: [],
                      title: 'State',
                      filterKey: 'state',
                    )
                  ],
                ),
              ));
            },
          );
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

2. 参考我提供的内容和示例代码回答“Flutter亚马逊风格筛选插件amazon_like_filter的使用”对应的内容

标题：Flutter亚马逊风格筛选插件amazon_like_filter的使用

内容如下：

AmazonLikeFilter 是一个用于构建类似亚马逊应用的过滤UI的widget。
动机：这个包的主要动机之一是其中一个项目功能需要添加具有多个过滤选项的过滤UI。
作者：
- @subhashDev11
示例：
功能：
- 多级过滤选项
- 过滤结果随更改而变化
- 重置过滤
- 提交过滤
- 视图可以通过scaffold、dialog或bottom sheet打开
文档：
使用示例：

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

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

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

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Amazon like filter'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({required this.title});

  final String title;

  [@override](/user/override)
  State&lt;MyHomePage&gt; createState() =&gt; _MyHomePageState();
}

class _MyHomePageState extends State&lt;MyHomePage&gt; {
  List&lt;AppliedFilterModel&gt; applied = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(
          horizontal: 15,
          vertical: 10,
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Visibility(
              visible: applied.isNotEmpty,
              child: Padding(
                padding: const EdgeInsets.only(
                  bottom: 20,
                ),
                child: Text(
                  'Applied filters',
                  style: Theme.of(context).textTheme.titleLarge,
                ),
              ),
            ),
            ...applied
                .map((e) =&gt; ExpansionTile(
                    title: Text(e.filterTitle ?? '${e.filterKey.split('_')}'),
                    children: e.e.applied
                        .map((fil) =&gt; ListTile(
                              title: Text(fil.filterTitle),
                            ))
                        .toList(),
                  ),
                )
                .toList()
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          showModalBottomSheet(
            context: context,
            builder: (_) {
              return FilterWidget(
                filterProps: FilterProps(
                  onFilterChange: (value) {
                    setState(() {
                      applied = value;
                    });
                    print('Applied filer - ${value.map((e) =&gt; e.toMap())}');
                  },
                  filters: const [
                    FilterListModel(
                      filterOptions: [
                        FilterItemModel(filterTitle: 'Education', filterKey: 'education'),
                        FilterItemModel(filterTitle: 'Information Technology', filterKey: 'it'),
                        FilterItemModel(filterTitle: 'Sports', filterKey: 'sports'),
                        FilterItemModel(filterTitle: 'Transport', filterKey: 'transport'),
                      ],
                      previousApplied: [],
                      title: 'Industry',
                      filterKey: 'industry',
                    ),
                    FilterListModel(
                      filterOptions: [
                        FilterItemModel(filterTitle: 'Utter Pradesh', filterKey: 'up'),
                        FilterItemModel(filterTitle: 'Madhya Pradesh', filterKey: 'mp'),
                        FilterItemModel(filterTitle: 'Hariyana', filterKey: 'hr'),
                        FilterItemModel(filterTitle: 'Bihar', filterKey: 'bihar'),
                      ],
                      previousApplied: [],
                      title: 'State',
                      filterKey: 'state',
                    )
                  ],
                ),
              ));
            },
          );
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

更多关于Flutter亚马逊风格筛选插件amazon_like_filter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

bupafengyu 1楼

更多关于Flutter亚马逊风格筛选插件amazon_like_filter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中集成和使用amazon_like_filter插件的一个基本示例。amazon_like_filter插件用于创建类似亚马逊的筛选界面。

首先，确保你的Flutter项目已经设置好，并且你已经在pubspec.yaml文件中添加了amazon_like_filter依赖。

dependencies:
  flutter:
    sdk: flutter
  amazon_like_filter: ^latest_version  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来，创建一个简单的示例来展示如何使用amazon_like_filter。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Amazon Like Filter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FilterScreen(),
    );
  }
}

class FilterScreen extends StatefulWidget {
  @override
  _FilterScreenState createState() => _FilterScreenState();
}

class _FilterScreenState extends State<FilterScreen> {
  final List<FilterGroup> filterGroups = [
    FilterGroup(
      title: 'Brand',
      filters: [
        FilterChip(label: 'Apple', value: 'apple'),
        FilterChip(label: 'Samsung', value: 'samsung'),
        FilterChip(label: 'Huawei', value: 'huawei'),
      ],
    ),
    FilterGroup(
      title: 'Price',
      filters: [
        FilterChip(label: '$0 - $100', value: '0-100'),
        FilterChip(label: '$100 - $200', value: '100-200'),
        FilterChip(label: '$200 - $300', value: '200-300'),
      ],
    ),
    FilterGroup(
      title: 'Rating',
      filters: [
        FilterChip(label: '1 Star', value: '1'),
        FilterChip(label: '2 Stars', value: '2'),
        FilterChip(label: '3 Stars', value: '3'),
        FilterChip(label: '4 Stars', value: '4'),
        FilterChip(label: '5 Stars', value: '5'),
      ],
    ),
  ];

  List<String> selectedFilters = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Amazon Like Filter Demo'),
      ),
      body: AmazonLikeFilter(
        filterGroups: filterGroups,
        selectedFilters: selectedFilters,
        onChanged: (newSelectedFilters) {
          setState(() {
            selectedFilters = newSelectedFilters;
          });
          // 在这里处理筛选结果
          print('Selected Filters: $selectedFilters');
        },
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的筛选界面，其中包含三个筛选组：“Brand”，“Price”和“Rating”。每个筛选组包含了一些筛选选项（FilterChip）。

关键部分解释：

FilterGroup:
- title: 筛选组的标题。
- filters: 筛选组中的选项列表，每个选项是一个FilterChip。
AmazonLikeFilter:
- filterGroups: 筛选组的列表。
- selectedFilters: 当前选中的筛选选项列表。
- onChanged: 当筛选选项发生变化时的回调，新的筛选选项列表会传递给这个回调。

运行这个示例，你将看到一个类似亚马逊风格的筛选界面，用户可以选择不同的筛选选项，并在控制台中看到选中的筛选结果。

你可以根据实际需求进一步定制和扩展这个示例，例如添加更多筛选组、选项，或者处理筛选结果以更新产品列表。