搜尋套件、儲存庫與 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

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。