搜索插件、代码仓与 APP 分类

time_picker_spinner 封面
插件详情v1.0.2

time_picker_spinner

使用旋转按钮代替默认的 Material 时钟选择器。此控件支持 12 小时或 24 小时格式以及自定义间隔模式,该包支持阿拉伯语和英语的本地化。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
1980
喜欢数
9
Pub 分数
130

安装插件

flutter pub add time_picker_spinner

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包,使用旋转选择器小部件代替默认的 Material 时间选择器。它支持 12 小时和 24 小时格式,可自定义时间间隔,并提供阿拉伯语(ar)和英语(en)的本地化支持。非常适合需要在多个平台上保持一致且非 Material 风格的时间选择界面的应用程序。该小部件轻量级,可无缝集成到表单或设置屏幕中,适用于需要传统时间选择器的场景。

适合场景

  • 表单中的自定义时间输入
  • 本地时间选择
  • 非物料UI设计
  • 时间间隔自定义
  • 跨平台时间选择器
  • 带时间输入的设置

主要特点

  • 基于旋转器的时间选择
  • 12/24 小时制格式支持
  • 自定义间隔选项
  • 阿拉伯语和英语本地化
  • 适用于所有主要平台
  • 轻量且易于集成

适合对象

  • 寻求替代时间选择器的开发者
  • 需要本地化时间输入的应用程序
  • 设计师避免使用 Material 组件
  • 多平台应用程序
  • 表单密集型用户界面

使用建议

  • 仅限基本时间选择
  • 无内置验证
  • 需要手动处理时间逻辑
  • 不适用于复杂的时间操作
  • 依赖外部本地化设置

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

time_picker_spinner

Time Picker with spinner instead of a default material time picker. This widget works with 12 or 24 hour format and custom interval mode, and this package allow localization ar and en.

Pub Version

Demo gif

image

Installation

  1. Add this to your package's pubspec.yaml file:
dependencies:
  time_picker_spinner: any
  1. Get the package using your IDE's GUI or via command line with
$ pub get
  1. Import the time_picker_spinner.dart file in your app
import 'package:time_picker_spinner/time_picker_spinner.dart';

Features

  • This widget works with 12.
  • This widget works with 24.
  • allow localization ar and en.

Usage

EN
en short en long

image | image

TimePickerSpinner(
              locale: const Locale('en', ''),
              time: dateTime,
              is24HourMode: false,
              isShowSeconds: true,
              itemHeight: 80,
              normalTextStyle: const TextStyle(
                fontSize: 24,
              ),
              highlightedTextStyle:
                  const TextStyle(fontSize: 24, color: Colors.blue),
              isForce2Digits: true,
              onTimeChange: (time) {
                setState(() {
                  dateTime = time;
                });
              },
            )
Ar
ar short ar long

image | image

TimePickerSpinner(
              locale: const Locale('ar', ''),
              time: dateTime,
              is24HourMode: false,
              isShowSeconds: true,
              itemHeight: 80,
              normalTextStyle: const TextStyle(
                fontSize: 24,
              ),
              highlightedTextStyle:
                  const TextStyle(fontSize: 24, color: Colors.blue),
              isForce2Digits: true,
              onTimeChange: (time) {
                setState(() {
                  dateTime = time;
                });
              },
            )

Props

props types defaultValues
time DateTime Current Time [ DateTime.now() ]
minutesInterval int 1
secondsInterval int 1
is24HourMode bool true
isShowSeconds bool false
isShowSeconds bool false
highlightedTextStyle TextStyle false
normalTextStyle TextStyle false
itemHeight double 60.0
itemWidth double 45.0
spacing double 20.0
alignment AlignmentGeometry Alignment.centerRight
isForce2Digits bool false
onTimeChange TimePickerCallback
locale bool en

所属分类

源码仓库

使用此插件的项目

暂无相关数据。