Flutter选择器插件flutter_picker_plus的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter选择器插件flutter_picker_plus的使用

插件介绍

flutter_picker_plus是Flutter的一个增强版选择器插件，它继承自flutter_picker。该插件提供了多种类型的选择器，包括数字选择器（NumberPicker）、日期时间选择器（DateTimePicker）、数组选择器（ArrayPicker）和默认联动选择器（Picker）。它通过提供灵活的参数配置来满足不同的需求，并且可以通过自定义适配器扩展更多功能。

示例图片

支持的语言

flutter_picker_plus支持超过10种常用语言，包括但不限于：

  • 阿拉伯语 (Arabic)
  • 孟加拉语 (Bengali)
  • 中文 (Chinese)
  • 英语 (English)
  • 法语 (French)
  • 德语 (German)
  • 希腊语 (Greek)
  • 印地语 (Hindi)
  • 印度尼西亚语 (Indonesian)
  • 意大利语 (Italian)
  • 日语 (Japanese)
  • 韩语 (Korean)
  • 葡萄牙语 (Portuguese)
  • 罗马尼亚语 (Romanian)
  • 俄语 (Russian)
  • 西班牙语 (Spanish)
  • 土耳其语 (Turkish)
  • 乌尔都语 (Urdu)

使用方法

示例代码

以下是flutter_picker_plus的基本使用示例，展示了如何创建不同类型的选择器：

import 'package:flutter/material.dart';
import 'package:flutter_picker_plus/flutter_picker_plus.dart';
import 'dart:convert';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Picker Plus Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  void showPicker(BuildContext context) {
    Picker picker = Picker(
      adapter: PickerDataAdapter<String>(
          pickerData: JsonDecoder().convert(PickerData)),
      changeToFirst: true,
      textAlign: TextAlign.left,
      columnPadding: const EdgeInsets.all(8.0),
      onConfirm: (Picker picker, List value) {
        print(value.toString());
        print(picker.getSelectedValues());
      },
    );
    picker.showBottomSheet(context);
  }

  void showPickerModal(BuildContext context) {
    Picker(
      adapter: PickerDataAdapter<String>(
          pickerData: JsonDecoder().convert(PickerData)),
      changeToFirst: true,
      hideHeader: false,
      onConfirm: (Picker picker, List value) {
        print(value.toString());
        print(picker.adapter.text);
      },
    ).showModal(context);
  }

  void showPickerIcons(BuildContext context) {
    Picker(
      adapter: PickerDataAdapter(data: [
        PickerItem(text: Icon(Icons.add), value: Icons.add, children: [
          PickerItem(text: Icon(Icons.more)),
          PickerItem(text: Icon(Icons.aspect_ratio)),
          PickerItem(text: Icon(Icons.android)),
          PickerItem(text: Icon(Icons.menu)),
        ]),
        // 其他图标项...
      ]),
      title: Text("Select Icon"),
      onConfirm: (Picker picker, List value) {
        print(value.toString());
        print(picker.getSelectedValues());
      },
    ).showBottomSheet(context);
  }

  void showPickerDialog(BuildContext context) {
    Picker(
      adapter: PickerDataAdapter<String>(
          pickerData: JsonDecoder().convert(PickerData)),
      hideHeader: true,
      title: Text("Select Data"),
      onConfirm: (Picker picker, List value) {
        print(value.toString());
        print(picker.getSelectedValues());
      },
    ).showDialog(context);
  }

  void showPickerArray(BuildContext context) {
    Picker(
      adapter: PickerDataAdapter<String>(
        pickerData: JsonDecoder().convert(PickerData2),
        isArray: true,
      ),
      hideHeader: true,
      title: Text("Please Select"),
      onConfirm: (Picker picker, List value) {
        print(value.toString());
        print(picker.getSelectedValues());
      },
    ).showDialog(context);
  }

  void showPickerNumber(BuildContext context) {
    Picker(
      adapter: NumberPickerAdapter(data: [
        NumberPickerColumn(begin: 0, end: 999),
        NumberPickerColumn(begin: 100, end: 200),
      ]),
      delimiter: [
        PickerDelimiter(
            child: Container(
              width: 30.0,
              alignment: Alignment.center,
              child: Icon(Icons.more_vert),
            ))
      ],
      hideHeader: true,
      title: Text("Please Select"),
      onConfirm: (Picker picker, List value) {
        print(value.toString());
        print(picker.getSelectedValues());
      },
    ).showDialog(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text('Flutter Picker Plus Demo'),
      ),
      body: ListView(
        padding: EdgeInsets.all(10.0),
        children: <Widget>[
          ListTile(
            title: Text('1. Picker Show'),
            onTap: () {
              showPicker(context);
            },
          ),
          ListTile(
            title: Text('2. Picker Show Modal'),
            onTap: () {
              showPickerModal(context);
            },
          ),
          ListTile(
            title: Text('3. Picker Show Icons'),
            onTap: () {
              showPickerIcons(context);
            },
          ),
          ListTile(
            title: Text('4. Picker Show (Array)'),
            onTap: () {
              showPickerArray(context);
            },
          ),
          ListTile(
            title: Text('5. Picker Show Number'),
            onTap: () {
              showPickerNumber(context);
            },
          ),
          // 更多选项...
        ],
      ),
    );
  }
}

PickerData 示例

数组形式

const PickerData2 = '''
[
    [
        1,
        2,
        3,
        4
    ],
    [
        11,
        22,
        33,
        44
    ],
    [
        "aaa",
        "bbb",
        "ccc"
    ]
]
''';

联动形式

const PickerData = '''
[
    {
        "a": [
            {
                "a1": [
                    1,
                    2,
                    3,
                    4
                ]
            },
            {
                "a2": [
                    5,
                    6,
                    7,
                    8
                ]
            },
            {
                "a3": [
                    9,
                    10,
                    11,
                    12
                ]
            }
        ]
    },
    {
        "b": [
            {
                "b1": [
                    11,
                    22,
                    33,
                    44
                ]
            },
            {
                "b2": [
                    55,
                    66,
                    77,
                    88
                ]
            },
            {
                "b3": [
                    99,
                    1010,
                    1111,
                    1212
                ]
            }
        ]
    },
    {
        "c": [
            {
                "c1": [
                    "a",
                    "b",
                    "c"
                ]
            },
            {
                "c2": [
                    "aa",
                    "bb",
                    "cc"
                ]
            },
            {
                "c3": [
                    "aaa",
                    "bbb",
                    "ccc"
                ]
            }
        ]
    }
]
''';

总结

flutter_picker_plus是一个非常强大的选择器插件，适用于需要在Flutter应用中实现复杂选择逻辑的场景。通过上述示例代码，您可以快速上手并根据自己的需求进行定制化开发。希望这个指南能帮助您更好地理解和使用flutter_picker_plus！


更多关于Flutter选择器插件flutter_picker_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter选择器插件flutter_picker_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 flutter_picker_plus 插件的示例代码。flutter_picker_plus 是一个强大的 Flutter 插件，用于在应用中实现选择器功能，如日期选择器、时间选择器、地址选择器等。

首先，确保你已经在 pubspec.yaml 文件中添加了 flutter_picker_plus 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_picker_plus: ^x.y.z  # 请替换为最新版本号

然后，运行 flutter pub get 来获取依赖。

接下来是一个完整的 Flutter 应用示例，展示如何使用 flutter_picker_plus 来实现一个简单的日期选择器：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Picker Plus Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Picker? picker;
  List<PickerColumn> columns = [];

  @override
  void initState() {
    super.initState();
    // 设置日期选择器列
    PickerColumn dateColumn = PickerColumn(
      values: List.generate(31, (index) => index + 1).map((e) => e.toString()).toList(),
      displayValues: List.generate(31, (index) => index + 1).map((e) => e.toString()).toList(),
      defaultIndex: DateTime.now().day - 1,
    );

    PickerColumn monthColumn = PickerColumn(
      values: List.generate(12, (index) => index + 1).map((e) => e.toString()).toList(),
      displayValues: List.generate(12, (index) => {
        switch (index) {
          case 0: return 'Jan';
          case 1: return 'Feb';
          case 2: return 'Mar';
          case 3: return 'Apr';
          case 4: return 'May';
          case 5: return 'Jun';
          case 6: return 'Jul';
          case 7: return 'Aug';
          case 8: return 'Sep';
          case 9: return 'Oct';
          case 10: return 'Nov';
          case 11: return 'Dec';
          default: return '';
        }
      }).toList(),
      defaultIndex: DateTime.now().month - 1,
    );

    PickerColumn yearColumn = PickerColumn(
      values: List.generate(10, (index) => DateTime.now().year - index).map((e) => e.toString()).toList(),
      displayValues: List.generate(10, (index) => DateTime.now().year - index).map((e) => e.toString()).toList(),
      defaultIndex: 0,
    );

    columns = [yearColumn, monthColumn, dateColumn];

    picker = Picker(
      adapter: PickerDataAdapter(data: columns),
      title: '选择日期',
      onConfirm: (Picker picker, List<int> selectedIndex) {
        // 获取选中的值
        String year = columns[0].values[selectedIndex[0]];
        String month = columns[1].displayValues[selectedIndex[1]];
        String day = columns[2].values[selectedIndex[2]];
        setState(() {
          _selectedDate = "${year}-${month}-${day}";
        });
        Toast.makeText(context, "选择的日期: $_selectedDate", Toast.LENGTH_SHORT).show();
      },
      onCancel: (Picker picker) {
        Toast.makeText(context, '取消选择', Toast.LENGTH_SHORT).show();
      },
    );
  }

  String? _selectedDate;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Picker Plus Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _selectedDate ?? '请选择日期',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                picker?.showDialog(context);
              },
              child: Text('选择日期'),
            ),
          ],
        ),
      ),
    );
  }
}

这个示例代码展示了如何创建一个包含日期选择器的 Flutter 应用。你可以根据需要调整列的配置，比如增加时间选择器、地址选择器等。

注意：

  1. PickerDataAdapter 和 Picker 是 flutter_picker_plus 插件提供的类。
  2. Toast.makeText 是一个常用的 Android 风格的消息提示，在 Flutter 中你可以使用 Snackbar 或其他方式来替代。

希望这个示例能帮助你理解如何使用 flutter_picker_plus 插件。如果你有其他需求或问题，请随时提问。

回到顶部