Flutter底部弹出选择项插件bottom_sheet_item_selector的使用

Flutter底部弹出选择项插件bottom_sheet_item_selector的使用

Flutter底部弹出选择项插件bottom_sheet_item_selector是一个高度可定制的Flutter包，它简化了从底部弹出菜单中选择项目的流程。此小部件支持单选和多选模式，使其成为任何移动应用界面的灵活解决方案。无论是构建表单、筛选器还是项目选择器，此包都能轻松满足您的需求。

特性

• 单选：从列表中选择一个项目。
• 多选：通过勾选框界面选择多个项目。
• 可定制：自定义底部弹出菜单的外观和行为。
• 搜索功能：可选地启用搜索功能以过滤项目。

安装

在您的pubspec.yaml文件中添加以下依赖：

dependencies:
  bottom_sheet_item_selector: ^1.0.0

然后运行flutter pub get来安装该包。

示例用法

单选示例

SelectableItemBottomSheet<String>(
    title: 'Select One User',
    selectableItems: items,
    onItemSelected: (selectedItem) {
        ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('You selected: ${selectedItem.title}')),
        );
    },
);

多选示例

SelectableItemBottomSheet<String>(
    title: 'Select Multiple Users',
    selectableItems: items,
    isMultipleSelection: true,
    onItemsSelected: (selectedItems) {
        final selectedTitles = selectedItems.map((e) => e.title).join(', ');
        ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('You selected: $selectedTitles')),
        );
    },
);

截图

自定义选择视图	单选

多选	可搜索的选择

如何使用

1. 在您的pubspec.yaml文件中添加bottom_sheet_item_selector。
2. 导入包：

import 'package:bottom_sheet_item_selector/bottom_sheet_item_selector.dart';

1. 在您的小部件树中使用SelectableItemBottomSheet，如上面的示例所示。

自定义

您可以通过调整小部件中的参数来启用搜索功能、自定义小部件等。

贡献

欢迎贡献、提出问题和功能请求！

完整示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: HomeScreen(),
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final List<SelectableItem<String>> items = _generateUserItems();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Selectable Item Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Column(
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Text("Single Selector"),
                SelectableItemBottomSheet<String>(
                  title: 'Select One User',
                  selectableItems: items,
                  onItemSelected: (selectedItem) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('You selected: ${selectedItem.title}')),
                    );
                  },
                ),
              ],
            ),
            const SizedBox(height: 30),
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Text("Multiple Selector"),
                SelectableItemBottomSheet<String>(
                  title: 'Select Multiple Users',
                  selectableItems: items,
                  isMultipleSelection: true,
                  onItemsSelected: (selectedItems) {
                    final selectedTitles = selectedItems.map((e) => e.title).join(', ');
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('You selected: $selectedTitles')),
                    );
                  },
                ),
              ],
            ),
            const SizedBox(height: 30),
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Text("With search field"),
                SelectableItemBottomSheet<String>(
                  title: 'Select Items',
                  selectableItems: items,
                  canSearchItems: true,
                  isMultipleSelection: true,
                  onItemsSelected: (selectedItems) {
                    final selectedTitles = selectedItems.map((e) => e.title).join(', ');
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('You selected: $selectedTitles')),
                    );
                  },
                ),
              ],
            ),
            const SizedBox(height: 30),
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Text("Customm Selection Widget"),
                SelectableItemBottomSheet<String>(
                  title: 'Select Multiple Users',
                  selectableItems: items,
                  isMultipleSelection: true,
                  onItemsSelected: (selectedItems) {
                    final selectedTitles = selectedItems.map((e) => e.title).join(', ');
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('You selected: $selectedTitles')),
                    );
                  },
                  child: Container(
                    color: Colors.blueAccent.shade400,
                    padding: const EdgeInsets.all(10),
                    child: const Text(
                      "Filters",
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  List<SelectableItem<String>> _generateUserItems() {
    return List<SelectableItem<String>>.generate(
      20,
      (index) => SelectableItem<String>(
        title: 'User ${index + 1}',
        value: 'user_${index + 1}',
      ),
    );
  }
}