flutter如何实现time_picker_sheet时间选择器

在Flutter中如何实现类似time_picker_sheet的时间选择器？我需要一个可以自定义样式、支持24小时制的时间选择组件，最好能提供完整的示例代码。官方的时间选择器样式不符合我的需求，想知道有没有现成的第三方库或者推荐的自定义实现方案？

2 回复

使用Flutter实现时间选择器，可通过showModalBottomSheet弹出底部面板，结合CupertinoDatePicker或Material Design的TimePicker。推荐使用time_picker_sheet第三方库简化实现，支持自定义主题和回调。

更多关于flutter如何实现time_picker_sheet时间选择器的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，可以使用 showModalBottomSheet 结合 CupertinoDatePicker 或第三方库实现时间选择器。以下是两种实现方式：

1. 使用 CupertinoDatePicker（iOS风格）

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

void showTimePickerSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return Container(
        height: 250,
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                TextButton(
                  onPressed: () => Navigator.pop(context),
                  child: Text('取消'),
                ),
                TextButton(
                  onPressed: () {
                    // 获取选择的时间
                    Navigator.pop(context);
                  },
                  child: Text('确认'),
                ),
              ],
            ),
            Expanded(
              child: CupertinoDatePicker(
                mode: CupertinoDatePickerMode.time,
                onDateTimeChanged: (DateTime newTime) {
                  print('选择的时间: $newTime');
                },
              ),
            ),
          ],
        ),
      );
    },
  );
}

2. 使用第三方库 flutter_datetime_picker

在 pubspec.yaml 中添加依赖：

dependencies:
  flutter_datetime_picker: ^1.5.1

使用示例：

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';

void showTimePicker(BuildContext context) {
  DatePicker.showTimePicker(
    context,
    showTitleActions: true,
    onConfirm: (time) {
      print('选择的时间: $time');
    },
    currentTime: DateTime.now(),
  );
}

3. 自定义时间选择器

如需更多自定义，可以组合使用 ListView 和 FixedExtentScrollController 实现滚轮选择器。

这些方法都能实现时间选择功能，推荐使用 flutter_datetime_picker 库，它提供了丰富的配置选项和主题定制能力。

回到顶部