Flutter时间间隔选择插件interval_time_picker的使用

本插件通过在选择分钟时添加间隔选项来修改默认的Flutter时间选择器小部件。这意味着您可以限制用户仅选择特定分钟间隔，并可以选择时间选择器在表盘模式下吸附到哪个分钟间隔。

版本说明

• Flutter 2.0.0 到 3.7.12 应使用版本 1.1.0+4。
• Flutter 3.1.0 到 3.19.6 应使用版本 2.0.0+5。
• Flutter 3.22.x 应使用版本 3.0.2+8。
• Flutter 3.24.0 及更高版本应使用版本 3.0.3+9。

使用方法

在您的Flutter项目的 pubspec.yaml 文件中，添加以下依赖：

dependencies:
  ...
  interval_time_picker: ^3.0.1+7

在代码顶部添加以下导入语句：

import 'package:interval_time_picker/interval_time_picker.dart';

然后可以在代码中调用以下方法：

showIntervalTimePicker(
    context: context,
    initialTime: TimeOfDay.fromDateTime(DateTime.now()),
    interval: 5,
    visibleStep: VisibleStep.fifths,
);

解释

该插件添加了两个参数：

• interval
• visibleStep

在大多数情况下，建议将间隔和可见步长设置为相同值： 例如分别设置为 5 和 VisibleStep.fifths 或者 12 和 VisibleStep.twelfths。

区间（Interval）

interval 参数是区间时间选择器在验证所选时间（分钟）时使用的步骤，也是它四舍五入到的步骤。 默认和最小值为1分钟。最大值为60分钟。

实际上也可以使用不是60的因数的间隔。例如，如果想使用7分钟，也可以使用。在这种情况下，最高可选分钟为56，超过56会跳转到0。

此插件还修复了单独分钟只能通过拖动表盘选择的问题： Flutter问题 #62424

可见步长（VisibleStep）

visibleStep 参数是在表盘上可见的分钟标签。使用 VisibleStep 枚举选择步长。 选项是60的因数，其中5是最小值，60（显示为00）是最大值。默认值为 VisibleStep.fifths。

声明

• 如果初始分钟不是间隔的倍数，它仍然会选中该分钟。 所以在调用 showIntervalTimePicker 时需要自行处理这种情况。

贡献

• MarkJ
• MarkCLinovy
• NilsReichardt
• Hromov

完整示例

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:interval_time_picker/interval_time_picker.dart';
import 'package:interval_time_picker/models/visible_step.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Interval Time Picker Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorScheme: const ColorScheme.light()),
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  TimeOfDay _time = const TimeOfDay(hour: 7, minute: 15);
  int _interval = 5;
  VisibleStep _visibleStep = VisibleStep.fifths;

  void _selectTime() async {
    final TimeOfDay? newTime = await showIntervalTimePicker(
      context: context,
      initialTime: _time,
      interval: _interval,
      visibleStep: _visibleStep,
    );
    if (newTime != null) {
      setState(() {
        _time = newTime;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _selectTime,
              child: const Text('SELECT TIME'),
            ),
            const SizedBox(height: 8),
            Text(
              'Selected time: ${_time.format(context)}',
            ),
            const SizedBox(height: 24),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Slider(
                  value: _interval.toDouble(),
                  min: 1,
                  max: 60,
                  divisions: 60,
                  label: _interval.toString(),
                  onChanged: (double value) {
                    setState(() {
                      _interval = value.toInt();
                    });
                  },
                ),
                DropdownButton<VisibleStep>(
                  value: _visibleStep,
                  icon: const Icon(Icons.arrow_downward),
                  iconSize: 24,
                  elevation: 16,
                  style: const TextStyle(color: Colors.deepPurple),
                  underline: Container(
                    height: 2,
                    color: Colors.deepPurpleAccent,
                  ),
                  onChanged: (VisibleStep? newValue) {
                    if (newValue != null) {
                      setState(() {
                        _visibleStep = newValue;
                      });
                    }
                  },
                  items: VisibleStep.values.map((VisibleStep visibleStep) {
                    return DropdownMenuItem<VisibleStep>(
                        value: visibleStep,
                        child: Text(visibleStep.toString()));
                  }).toList(),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}