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

day_night_time_picker 封面
插件详情v1.3.1

day_night_time_picker

一个用于 Flutter 的昼夜时间选择器。带有太阳和月亮资源的精美昼夜动画。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
6960
喜欢数
700
Pub 分数
145

安装插件

flutter pub add day_night_time_picker

插件介绍

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

一个 Flutter 包,提供美观的时间选择器,具有流畅的昼夜过渡效果,配有动画太阳和月亮视觉效果。通过动态光照效果直观呈现一天中的时间,提升用户体验。该选择器可自定义,支持 Android、iOS、Web、macOS、Windows 和 Linux 多个平台。适用于对时间感知和视觉吸引力有要求的应用。

适合场景

  • 需要时间选择且具有视觉主题变化的应用程序界面
  • 带有昼夜主题的时钟或日程安排应用
  • 在生活方式或生产力应用中使用友好的时间选择器

主要特点

  • 动画太阳和月亮过渡
  • 日间和夜间视觉主题集成
  • 跨平台兼容性
  • 可自定义外观
  • 流畅的动画
  • 通过 pub add 的简单集成

适合对象

  • 开发基于时间的应用程序的开发者
  • 注重设计的UI实现
  • 针对日常习惯或睡眠追踪的应用

使用建议

  • 可能需要额外的资源管理
  • 低端设备上的动画性能
  • 超出视觉主题之外的自定义功能有限

原始 README

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

DayNightTimePicker

All Contributors

A day night time picker for Flutter with Zero Dependencies.

Default style:


IOS style:


View it on pub.dev

Installation

Add to pubspec.yaml.

dependencies:
  day_night_time_picker:

Usage

To use plugin, just import package

import 'package:day_night_time_picker/day_night_time_picker.dart';

Example

TextButton(
    onPressed: () {
        Navigator.of(context).push(
            showPicker(
                context: context,
                value: _time,
                sunrise: TimeOfDay(hour: 6, minute: 0), // optional
                sunset: TimeOfDay(hour: 18, minute: 0), // optional
                duskSpanInMinutes: 120, // optional
                onChange: onTimeChanged,
            ),
        );
    },
    child: Text(
        "Open time picker",
        style: TextStyle(color: Colors.white),
    ),
),

Props

Name Description Default
value Required Display value. It takes in [Time].
onChange Required Return the new time the user picked as [Time].
isInlinePicker Whether to render an inline widget. false
onChangeDateTime Optional Return the new time the user picked as [DateTime].
onCancel Optional Custom callback for the Cancel button. Note: if provided, it will override the default behavior of the Cancel button.
is24HrFormat Show the time in TimePicker in 24 hour format. false
accentColor Accent color of the TimePicker. Theme.of(context).accentColor
unselectedColor Color applied unselected options (am/pm, hour/minute). Colors.grey
cancelText Text displayed for the Cancel button. cancel
okText Text displayed for the Ok button. ok
sunAsset Image asset used for the Sun. Asset provided
moonAsset Image asset used for the Moon. Asset provided
blurredBackground Whether to blur the background of the [Modal]. false
barrierColor Color of the background of the [Modal]. Colors.black45
borderRadius Border radius of the [Container] in [double]. 10.0
elevation Elevation of the [Modal] in [double]. 12.0
dialogInsetPadding Inset padding of the [Modal] in EdgeInsets. EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0)
barrierDismissible Whether clicking outside should dismiss the [Modal]. true
showCancelButton Whether to show the cancel button or not true
iosStylePicker Whether to display a IOS style picker (Not exactly the same). false
hourLabel The label to be displayed for hour picker. Only for iosStylePicker. 'hours'
minuteLabel The label to be displayed for minute picker. Only for iosStylePicker. 'minutes'
minuteInterval Steps interval while changing minute. Accepts TimePickerInterval enum. TimePickerInterval.ONE
secondInterval Steps interval while changing minute. Accepts TimePickerInterval enum. TimePickerInterval.ONE
disableMinute Disables the minute picker. false
disableHour Disables the hour picker. false
minHour Selectable minimum hour. Defaults to 1[12hr] or 0[24hr]
maxHour Selectable maximum hour. Defaults to 12[12hr] or 23[24hr]
minMinute Selectable minimum minute. 0
minSecond Selectable minimum second. 0
maxMinute Selectable maximum minute. 59
maxSecond Selectable maximum second. 59
displayHeader Whether to display the sun moon animation. true
isOnValueChangeMode Whether to hide okText, cancelText and return value on every onValueChange. Only for Inline widget false
focusMinutePicker Whether or not the minute picker is auto focus/selected. false
themeData ThemeData to use for the widget. Theme.of(context)
okStyle Ok button's text style. const TextStyle(fontWeight: FontWeight.bold)
cancelStyle Cancel button's text style. const TextStyle(fontWeight: FontWeight.bold)
buttonStyle Button's style. If cancelButtonStyle not provided, it applies to ok and cancel buttons. Theme.of(context).colorScheme.secondary
cancelButtonStyle Cancel button style. Theme.of(context).colorScheme.secondary
buttonsSpacing Spacing between cancel and ok buttons. 0
wheelHeight Only for createInlinePicker Height of the Wheel 240
hideButtons Whether to hide the buttons (ok and cancel). false
disableAutoFocusToNextInput Whether to disable the auto focus to the next input after current input is selected. false
width Fixed width of the Picker container. 300 (350 for iosStyle)
height Fixed height of the Picker container. 400
sunrise Sunrise time. 400
sunset Sunset time. 400
duskSpanInMinutes Dusk span in minutes. 400
settings Optional Data that might be useful in constructing a [Route].

Contributors

Thanks goes to these wonderful people:

Subhamay Dutta
Subhamay Dutta

💻 📖
Andrew Zuo
Andrew Zuo

💻
Mohammad Odeh
Mohammad Odeh

💻
Hashem Alayan
Hashem Alayan

💻
gohdong
gohdong

💻
nohli
nohli

💻
sander102907
sander102907

💻
Sobhan Moradi
Sobhan Moradi

🎨
Omar Dahhane
Omar Dahhane

💻
Fatih Yaman
Fatih Yaman

🎨
JerryShen
JerryShen

💻
本多健也
本多健也

💻
Tempelritter
Tempelritter

💻 📖
Silfalion
Silfalion

💻
Chengxi Gu
Chengxi Gu

💻
Saif Billah
Saif Billah

💻
Mark Szente
Mark Szente

💻
Juan Carlos Ramón Condezo
Juan Carlos Ramón Condezo

🎨
Chuanyi
Chuanyi

📖
Leon Schwanitz
Leon Schwanitz

🎨
Liam DeCoste
Liam DeCoste

🐛
qqjjjj
qqjjjj

💻
Moshe Yamini
Moshe Yamini

💻
Ryota Kobayashi
Ryota Kobayashi

💻
Asraful Islam
Asraful Islam

💻

This project follows the all-contributors specification. Contributions of any kind welcome!


LICENCE

Copyright 2023 Subhamay Dutta

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

所属分类

源码仓库

使用此插件的项目