Flutter项目选择项插件rx_item_picker的使用

简介

rx_item_picker 是一个用于从下拉底部弹出框中选择项目的插件。它允许用户通过搜索和过滤功能快速找到所需选项。

特性

• 支持自定义过滤器。
• 提供丰富的定制化选项，如颜色设置。
• 支持多种数据类型的选择。

使用步骤

1. 添加依赖

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

dependencies:
  rx_item_picker: ^版本号

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

2. 基本用法

示例代码

以下是一个完整的示例代码，展示如何使用 rx_item_picker 插件来选择服务提供商。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Rx Item Picker 示例')),
        body: Center(child: ExamplePage()),
      ),
    );
  }
}

class ExamplePage extends StatefulWidget {
  @override
  _ExamplePageState createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  final providerController = TextEditingController();

  // 模拟的 Provider 数据列表
  List<Provider> providers = [
    Provider(id: '1', name: 'Google'),
    Provider(id: '2', name: 'Apple'),
    Provider(id: '3', name: 'Microsoft'),
  ];

  Future<void> _showPicker() async {
    final provider = await RxItemPicker.picker<Provider>(
      title: "选择服务提供商",
      selectedFilterColor: Colors.blue,
      unselectedFilterColor: Colors.grey,
      value: providers.firstWhereOrNull(
        (element) => element.name == providerController.text,
      ),
      values: providers
          .map(
            (e) => RxItemPickerDto(
              value: e,
              search: [e.id, e.name].join(" "),
            ),
          )
          .toList(),
      itemBuilder: (context, item) => Row(
        children: [
          // 自定义图标（此处为占位符）
          Icon(Icons.business),
          Text(item.value.name),
        ],
      ),
    );

    if (provider != null) {
      setState(() {
        providerController.text = provider.value.name;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextField(
          controller: providerController,
          decoration: InputDecoration(labelText: '当前选择'),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: _showPicker,
          child: Text('选择提供商'),
        ),
      ],
    );
  }
}

// 模拟的 Provider 类
class Provider {
  final String id;
  final String name;

  Provider({required this.id, required this.name});
}

3. 高级用法

示例代码

以下是一个更复杂的示例，展示如何使用过滤器和全屏模式。

final plan = await RxItemPicker.picker<Plan>(
  title: "选择计划",
  fullscreen: true, // 是否全屏显示
  initialFilter: "daily", // 初始过滤条件
  filters: ["Daily", "Weekly", "Monthly", "2 Months", "Yearly"], // 过滤选项
  selectedFilterColor: Colors.green,
  unselectedFilterColor: Colors.grey,
  value: plans
      .firstWhereOrNull((element) => element.id == planController.text),
  values: plans
      .map((e) => RxItemPickerDto(
            name: e.name,
            value: e,
            search: e.name,
          ))
      .toList(),
);
if (plan == null) {
  return;
}