Flutter下拉轮盘选择器插件dropdown_wheel

Flutter下拉轮盘选择器插件dropdown_wheel_picker的使用

特性

Flutter包用于下拉滚动轮盘选择器

GitHub Repo stars GitHub License Pub Version Pub Likes Pub Popularity

特征

IOS	Android

开始使用

前提条件

Dart >= 3.0
Flutter

使用方法

下拉单项选择器

DropdownItemPicker(
    pickerTitle: Text('国家'),
    items: [
        Text('中国 🇨🇳'),
        Text('法国 🇫🇷'),
        Text('俄罗斯 🇷🇺'),
        Text('英国 🇬🇧'),
        Text('美国 🇺🇸'),
    ],
    onChanged: (value) => print('选中的国家: $value'),
)

多列下拉选择器

DropdownMultiColItemPicker(
    pickerTitle: Text('星球大战'),
    multiColItems: [
        [
            Text('绝地'),
            Text('帝国'),
        ],
        [
            Text('卢克'),
            Text('阿纳金'),
            Text('欧比旺'),
            Text('汉·索罗'),
            Text('帕尔帕廷'),
        ]
    ],
    onChanged: (value) => print('选中的角色: $value'),
)

下拉日期选择器

DropdownDatePicker(
    pickerTitle: Text('日期选择器'),
    initialDate: DateTime(2024, 1, 1),
    firstYear: 2020,
    lastYear: 2025,
    onChanged: (value) => print('选中的日期: $value'),
)

下拉距离选择器

DropdownDistancePicker(
    pickerTitle: Text('距离选择器'),
    initialDistance: Length(2.5, 'mi'), // 初始距离为2.5英里
    onChanged: (value) => print('${value.value} ${value.unit}'), // 输出格式如 "2.5 mi"
)

下拉时间选择器

DropdownTimePicker(
    pickerTitle: Text('时间选择器'),
    initialTime: const Duration(hours: 2, minutes: 0, seconds: 35), // 初始时间为2小时0分钟35秒
    onChanged: (value) => print(value), // 输出格式如 "02:00:35"
)

下拉配速选择器

DropdownPacePicker(
    pickerTitle: Text('配速选择器'),
    initialPace: Pace(const Duration(minutes: 6, seconds: 20), '/mi'), // 初始配速为6分20秒/英里
    onChanged: (value) => print(value), // 输出格式如 "06:20 /mi"
)

下拉高度选择器

DropdownHeightPicker(
    pickerTitle: Text('身高'),
    initialHeight: Length(70, 'in'), // 初始身高为70英寸
    onChanged: (value) => print(value), // 输出格式如 "70 in"
)

下拉重量选择器

DropdownWeightPicker(
    pickerTitle: Text('体重'),
    initialWieght: Mass(150, 'lb'), // 初始体重为150磅
    onChanged: (value) => print(value), // 输出格式如 "150 lb"
)

国家选择器

DropdownCountryPicker(
    pickerTitle: Text('国家'),
    scrollWheelHeight: 120, // 滚动轮盘的高度为120像素
    onChanged: (value) => print(value), // 输出选中的国家
)

额外信息

报告问题或反馈请在 GitHub Repo 提交。

完整示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
            seedColor: const Color.fromARGB(255, 62, 58, 69)),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
      child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8),
          child: SingleChildScrollView(
            child: Column(
              children: [
                DropdownItemPicker(
                  pickerTitle: const Text('国家'),
                  items: const [
                    Text('中国 🇨🇳'),
                    Text('法国 🇫🇷'),
                    Text('俄罗斯 🇷🇺'),
                    Text('英国 🇬🇧'),
                    Text('美国 🇺🇸'),
                  ],
                  onChanged: (value) => print('选中的国家: $value'),
                ),
                const SizedBox(height: 16),
                DropdownMultiColItemPicker(
                  pickerTitle: const Text('星球大战'),
                  multiColItems: const [
                    [
                      Text('绝地'),
                      Text('帝国'),
                    ],
                    [
                      Text('卢克'),
                      Text('阿纳金'),
                      Text('欧比旺'),
                      Text('汉·索罗'),
                      Text('帕尔帕廷'),
                    ]
                  ],
                  onChanged: (value) => print('选中的角色: $value'),
                ),
                const SizedBox(height: 16),
                DropdownDatePicker(
                  pickerTitle: const Text('日期选择器'),
                  initialDate: DateTime(2024, 1, 1),
                  onChanged: (value) => print('选中的日期: $value'),
                ),
                const SizedBox(height: 16),
                DropdownDistancePicker(
                  pickerTitle: const Text('距离选择器'),
                  initialDistance: Length(2.5, 'mi'),
                  onChanged: (value) => print('${value.value} ${value.unit}'),
                ),
                const SizedBox(height: 16),
                DropdownTimePicker(
                  pickerTitle: const Text('时间选择器'),
                  initialTime:
                      const Duration(hours: 2, minutes: 0, seconds: 35),
                  onChanged: (value) => print(value),
                ),
                const SizedBox(height: 16),
                DropdownPacePicker(
                  pickerTitle: const Text('配速选择器'),
                  initialPace:
                      Pace(const Duration(minutes: 6, seconds: 20), '/mi'),
                  onChanged: (value) => print(value),
                ),
                const SizedBox(height: 16),
                DropdownHeightPicker(
                    pickerTitle: const Text('身高'),
                    initialHeight: Length(70, 'in'),
                    onChanged: (value) => print(value)),
                const SizedBox(height: 16),
                DropdownWeightPicker(
                    pickerTitle: const Text('体重'),
                    initialWieght: Mass(150, 'lb'),
                    onChanged: (value) => print(value)),
                const SizedBox(height: 16),
                DropdownCountryPicker(
                  pickerTitle: const Text('国家'),
                  scrollWheelHeight: 120,
                  onChanged: (value) => print(value),
                ),
              ],
            ),
          )),
    ));
  }
}

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

yibo5220 1楼

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

当然，以下是如何在Flutter项目中使用dropdown_wheel_picker插件的示例代码。这个插件允许你创建一个下拉轮盘选择器，用于选择日期、时间或其他自定义选项。

首先，你需要在你的pubspec.yaml文件中添加依赖：

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

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

接下来，你可以在你的Flutter应用中使用DropdownWheelPicker组件。以下是一个简单的示例，展示了如何使用这个插件来创建一个日期选择器：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dropdown Wheel Picker Example'),
        ),
        body: Center(
          child: DatePickerDemo(),
        ),
      ),
    );
  }
}

class DatePickerDemo extends StatefulWidget {
  @override
  _DatePickerDemoState createState() => _DatePickerDemoState();
}

class _DatePickerDemoState extends State<DatePickerDemo> {
  DateTime selectedDate = DateTime.now();

  void _onDateSelected(DateTime date) {
    setState(() {
      selectedDate = date;
    });
  }

  @override
  Widget build(BuildContext context) {
    return DropdownWheelPicker(
      list: List.generate(30, (index) {
        int year = DateTime.now().year - (index % 10 == 0 ? 0 : index % 10);
        int month = index % 12 + 1;
        return "${year}-${month.toString().padStart(2, '0')}";
      }).reversed.toList(),
      selectedValue: selectedDate.toLocal().format(DateFormat('yyyy-MM')),
      itemCount: 30,
      itemHeight: 50,
      itemExtent: 30,
      onValueChanged: _onDateSelected,
      textStyle: TextStyle(fontSize: 18),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.2),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的日期选择器，使用DropdownWheelPicker组件。为了简化示例，这里只展示了过去30个月的年份和月份组合（从当前月份开始往回推30个月）。你可以根据需要调整数据源和格式。

注意几点：

list属性是一个字符串列表，表示轮盘中的选项。在这个例子中，我们生成了一个包含过去30个月年份和月份的字符串列表。
selectedValue属性是当前选中的值，我们使用DateTime对象的格式化字符串来表示。
onValueChanged回调函数会在选中值改变时被调用，你可以在这里更新你的状态。
itemHeight和itemExtent属性控制每个选项的高度和可见部分的高度。
decoration属性用于自定义组件的外观，比如边框、背景色和阴影。

你可以根据需要进一步自定义这个组件，比如添加时间选择、自定义选项样式等。希望这个示例对你有帮助！