Flutter时间选择器插件simple_predicate_time_picker的使用

Flutter时间选择器插件simple_predicate_time_picker的使用

简介

simple_predicate_time_picker 是一个自定义的时间选择器插件，允许你像在 showDatePicker 中一样设置可选时间的筛选条件。此插件是对原作者 jorgesanure-pub-dep 的扩展版本，原项目已停止维护。

功能演示

下图展示了插件的基本功能：

使用示例

以下是一个完整的示例代码，展示如何使用 simple_predicate_time_picker 插件来实现自定义时间选择器。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: '时间选择器示例',
      home: CustomTimePickerDemo(),
    );
  }
}

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

  [@override](/user/override)
  _CustomTimePickerDemoState createState() => _CustomTimePickerDemoState();
}

class _CustomTimePickerDemoState extends State<CustomTimePickerDemo> {
  String? selectedTime;

  // 定义可用的小时和分钟
  List<int> _availableHours = [1, 4, 6, 8, 12];
  List<int> _availableMinutes = [0, 10, 30, 45, 50];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          onTap: () {
            // 打开时间选择器
            showSimpleTimePicker(
              context: context,
              onFailValidation: (context) =>
                  showMessage(context, '不可用的选择'), // 验证失败回调
              initialTime: TimeOfDay(
                hour: _availableHours.first,
                minute: _availableMinutes.first,
              ), // 初始时间
              selectableTimePredicate: (time) =>
                  _availableHours.contains(time!.hour) &&
                  _availableMinutes.contains(time.minute), // 可选时间筛选条件
            ).then((time) {
              // 更新选中的时间
              setState(() => selectedTime = time?.format(context));
            });
          },
          child: Text(
            selectedTime ?? '请选择时间',
            style: TextStyle(fontSize: 55, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }

  // 显示提示信息
  void showMessage(BuildContext context, String message) {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          contentPadding: EdgeInsets.zero,
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              SizedBox(height: 16),
              Icon(
                Icons.warning,
                color: Colors.amber,
                size: 56,
              ),
              SizedBox(height: 12),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 15),
                child: Text(
                  message,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Color(0xFF231F20),
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              SizedBox(height: 12),
              InkWell(
                onTap: () => Navigator.of(context).pop(),
                child: Container(
                  alignment: Alignment.center,
                  width: double.infinity,
                  padding: EdgeInsets.symmetric(vertical: 16),
                  decoration: BoxDecoration(
                    border: Border(top: BorderSide(color: Color(0xFFE8ECF3))),
                  ),
                  child: Text(
                    '关闭',
                    style: TextStyle(
                      color: Color(0xFF2058CA),
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}