搜尋套件、儲存庫與 APP 分類

progressive_time_picker 封面
套件詳情v1.0.4

progressive_time_picker

此套件允許我們根據需求自訂時間選擇器,以從時間選擇器中選擇特定範圍,並支援多個平台。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
2730
喜歡數
177
Pub 分數
150

安裝套件

flutter pub add progressive_time_picker

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

progressive_time_picker 套件為 Flutter 應用程式提供了一個可自訂的時間選擇器,讓開發者能夠定義特定的時間範圍,並客製化選擇器的外觀與行為。它支援多個平台,包括 Android、iOS、Web、macOS、Windows 和 Linux,確保跨裝置提供一致的使用者體驗。透過彈性的設定選項,可精確控制時間選擇,非常適合需要自訂時間輸入邏輯的應用程式。此套件設計旨在易於整合與擴展。

適用情境

  • 自定時間範圍選擇
  • 跨平台時間輸入
  • 預約安排
  • 基於時間的表單輸入
  • 活動規劃工具

主要特色

  • 可設定的時間範圍
  • 多平台支援
  • 可擴充的 UI 自訂
  • 響應式設計
  • 平台無關的實作
  • 與 Flutter 表單輕鬆整合

適合對象

  • 需要靈活時間選擇器的開發者
  • 需要限制時間選擇的應用
  • 跨平台 Flutter 項目
  • 表單密集型應用
  • 以使用者介面為導向的時間輸入元件

使用建議

  • 需要了解 Flutter 狀態管理
  • 有限的內建主題(需自訂樣式)
  • 可能需要額外的驗證來處理邊緣情況
  • 未針對極長的時間間隔進行優化
  • 依賴外部 GitHub 倉庫以取得更新

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

progressive_time_picker

Flutter Website Dart Website MIT License

A Customizable Progressive Time Picker for Flutter. This package allow us to customize time picker based on our requirements for selecting a specific range from time picker and it's supports multiple platforms.

Key Features

  • Supports selecting either a single picker handler or both simultaneously.
  • Provides easy customization options for decorating the time picker.
  • Offers the ability to display clock numbers in both 12-hour and 24-hour formats, with full customization support.
  • Allows disabling specific time ranges for more control.

Preview

progressive time picker

progressive_time_picker

progressive time picker with disabled ranges

progressive_time_picker_disabled_range progressive_time_picker_multiple_disabled_ranges

Basic Usage

Import it to your project file

import 'package:progressive_time_picker/progressive_time_picker.dart';

And add it in its most basic form like it:

  TimePicker(
    initTime: PickedTime(h: 0, m: 0),
    endTime: PickedTime(h: 8, m: 0),
    onSelectionChange: (start, end, isDisableRange) =>
        print(
            'onSelectionChange => init : ${start.h}:${start.m}, end : ${end.h}:${end.m}, isDisableRangeRange: $isDisableRange'),
    onSelectionEnd: (start, end, isDisableRange) =>
        print(
            'onSelectionEnd => init : ${start.h}:${start.m}, end : ${end.h}:${end.m},, isDisableRangeRange: $isDisableRange'),
  );

And for the DisabledRanges:

TimePicker(
    initTime: PickedTime(h: 0, m: 0),
    endTime: PickedTime(h: 8, m: 0),
    disabledRanges: [
      DisabledRange(
        initTime: PickedTime(h: 12, m: 0),
        endTime: PickedTime(h: 20, m: 0),
      ),
    ],
    disabledRangesColor: Colors.grey,
    disabledRangesErrorColor: Colors.red,
    onSelectionChange: (start, end, isDisableRange) => print(
      'onSelectionChange => init : ${start.h}:${start.m}, end : ${end.h}:${end.m}, isDisableRangeRange: $isDisableRange'),
    onSelectionEnd: (start, end, isDisableRange) => print(
      'onSelectionEnd => init : ${start.h}:${start.m}, end : ${end.h}:${end.m},, isDisableRangeRange: $isDisableRange'),
);

Required parameters of TimePicker

Parameter Description
PickedTime initTime the init PickedTime value in the selection
PickedTime endTime the end PickedTime value in the selection
onSelectionChange callback function when init and end PickedTime change
onSelectionEnd callback function when init and end PickedTime finish

Optional parameters of TimePicker

Parameter Default Description
double height 220 height of the canvas
double width 220 width of the canvas
int primarySectors 0 the number of primary sectors to be painted
int secondarySectors 0 the number of secondary sectors to be painted
Widget child Container widget that would be mounted inside the circle
TimePickerDecoration decoration - used to decorate our TimePicker widget
bool isInitHandlerSelectable true used to enabled or disabled Selection of Init Handler
bool isEndHandlerSelectable true used to enabled or disabled Selection of End Handler
bool isSelectableHandlerMoveAble true used to enabled or disabled the Movement of Init and End Handler when its not Selectable (disable the dragging of both handlers)
List disabledRanges null used to disable Selection ranges, If null so there is no disable time ranges
Color disabledRangesColor Colors.grey defines the color for the disabled range
Color disabledRangesErrorColor Colors.red defines the color for the error in disabled range
bool drawInitHandlerOnTop false used to set priority to draw init or end handler on the top

Required parameters of TimePickerDecoration

Parameter Description
TimePickerSweepDecoration sweepDecoration used to decorate our sweep part or a part between our init and end point with various options
TimePickerHandlerDecoration initHandlerDecoration used to decorate our init or end handler of time picker
TimePickerHandlerDecoration endHandlerDecoration used to decorate our init or end handler of time picker

Optional parameters of TimePickerDecoration

Parameter Default Description
Color baseColor cyanAccent defines the background color of the picker
double pickerBaseCirclePadding 0.0 to add extra padding for picker base or outer circle
TimePickerSectorDecoration primarySectorsDecoration - used to decorate the primary sectors of out time picker
TimePickerSectorDecoration secondarySectorsDecoration - used to decorate the secondary of out time picker
TimePickerClockNumberDecoration clockNumberDecoration - Provides decoration options which will get applied to the internal clock's numbers when enable
SystemMouseCursor mouseCursor - Used to set SystemMouseCursor for PanGestureRecognizer

Guideline for contributors

  • Contribution towards our repository is always welcome, we request contributors to create a pull request for development.

Guideline to report an issue/feature request

It would be great for us if the reporter can share the below things to understand the root cause of the issue.

  • Library version
  • Code snippet
  • Logs if applicable
  • Device specification like (Manufacturer, OS version, etc)
  • Screenshot/video with steps to reproduce the issue
  • Library used

LICENSE!

progressive_time_picker is MIT-licensed.

Let us know!

We’d be really happy if you send us links to your projects where you use our open-source libraries. Just send an email to [sales@mindinventory.com](mailto:sales@mindinventory.com) And do let us know if you have any questions or suggestion regarding our work.

Visit our website mindinventory.com

Let us know if you are interested to building Apps or Designing Products.

flutter app development

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。