flutter如何使用flutter_picker插件

我在Flutter项目中使用flutter_picker插件时遇到了一些问题。具体表现为：1）不知道如何初始化一个基本的选择器；2）自定义选项数据源时总是报错；3）获取用户选择结果的回调方法不生效。想请教大家：1）能否提供一个完整的使用示例？2）如何处理多级联动选择的情况？3）如何修改选择器的默认样式？希望有经验的朋友能帮忙解答，谢谢！

2 回复

在Flutter中使用flutter_picker插件：

  1. 添加依赖到pubspec.yaml
  2. 导入包：import ‘package:flutter_picker/flutter_picker.dart’;
  3. 使用Picker组件，设置数据源和回调
  4. 通过showModalPopup或直接显示

示例： Picker( adapter: PickerDataAdapter(data: items), onConfirm: (picker, value) { print(value); } ).showModal(context);

更多关于flutter如何使用flutter_picker插件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter 使用 flutter_picker 插件可以创建自定义滚动选择器，适用于日期、时间或自定义列表选择。以下是基本使用步骤：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  flutter_picker: ^2.1.7

运行 flutter pub get 安装。

2. 基本用法示例

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

class PickerExample extends StatelessWidget {
  void _showPicker(BuildContext context) {
    Picker(
      adapter: PickerDataAdapter<String>(pickerdata: [
        ['苹果', '香蕉', '橙子', '西瓜']
      ]),
      title: Text('选择水果'),
      onConfirm: (Picker picker, List<int> selected) {
        print(picker.getSelectedValues());
      },
    ).showDialog(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showPicker(context),
          child: Text('打开选择器'),
        ),
      ),
    );
  }
}

3. 常用参数说明

  • adapter：数据适配器，支持 PickerDataAdapter（静态数据）或 DateTimePickerAdapter（日期时间）。
  • title：选择器标题。
  • onConfirm：确认回调，返回选中值和索引。
  • onChange：选择变化时触发。

4. 日期选择示例

Picker(
  adapter: DateTimePickerAdapter(),
  onConfirm: (Picker picker, List<int> selected) {
    DateTime date = (picker.adapter as DateTimePickerAdapter).value;
    print(date.toString());
  },
).showDialog(context);

注意事项

  • 可通过 columnPadding、height 等参数调整样式。
  • 支持多级联动，需在 adapter 中嵌套数据。

通过以上步骤即可快速集成滚动选择器功能。

回到顶部