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

flutter_date_picker_timeline 封面
插件详情v0.3.3

flutter_date_picker_timeline

一个作为水平时间轴的可自定义格里高利和贾拉利日期选择器

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
103
喜欢数
86
Pub 分数
130

安装插件

flutter pub add flutter_date_picker_timeline

插件介绍

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

一个可自定义的 Flutter 日期选择器,以水平时间线的形式显示日期,支持公历和伊朗历(波斯历)。它通过流畅的滚动和视觉反馈,使用户能够直观地选择日期。该包专为需要在长时间跨度内进行日期导航的应用程序设计,例如日程安排、规划或基于日历的工作流程。它可在所有主要平台(包括 Android、iOS、Web、macOS、Windows 和 Linux)上运行。

适合场景

  • 调度应用程序
  • 基于日历的任务规划器
  • 事件预订界面
  • 旅行行程管理
  • 长期项目时间表

主要特点

  • 支持格里高利历和杰拉利历
  • 水平可滚动的时间轴界面
  • 可自定义的外观和样式
  • 跨平台兼容性
  • 平滑的日期导航
  • 可配置的日期范围和选择模式

适合对象

  • 需要长时间日期选择的应用程序
  • 面向波斯语受众的开发者
  • 需要双日历支持的项目
  • UI 密集型日历实现
  • 跨平台 Flutter 应用程序

使用建议

  • 可能需要额外的样式才能实现最佳用户体验
  • 处理非常大的日期范围时的性能
  • 除了日期选择外,内置验证功能有限
  • 依赖外部本地化支持非英文语言环境

原始 README

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

Flutter Date Picker Timeline

Flutter Date Picker Timeline Banner pub package

💥 Gregorian and Jalali customizable date picker as a horizontal timeline 💥

Screenshot iOS      Screenshot android


Let's get started

1 - Depend on it
Add it to your package's pubspec.yaml file
dependencies:
  flutter_date_picker_timeline: ^0.3.3
2 - Install it
Install packages from the command line
flutter pub get
3 - Import it
Import it to your project
import 'package:flutter_date_picker_timeline/flutter_date_picker_timeline.dart';

How to use?

Use the FlutterDatePickerTimeline Widget
FlutterDatePickerTimeline(
    startDate: DateTime(2020, 07, 01),
    endDate: DateTime(2020, 12, 30),
    initialSelectedDate: DateTime(2020, 07, 24),
    onSelectedDateChange: (DateTime dateTime) {
        print(dateTime);
      },
    )
Constructor:
FlutterDatePickerTimeline({
    Key key,
    // Determines the [FlutterDatePickerTimeline] mode.
    this.calendarMode = CalendarMode.gregorian,
    // The first date of [FlutterDatePickerTimeline].
    @required this.startDate,
    // The last date of [FlutterDatePickerTimeline].
    @required this.endDate,
    // Initially selected date.
    this.initialSelectedDate,
    // Initially focused date(If nothing is provided, a [initialSelectedDate] will be used).
    this.initialFocusedDate,
    // Used for setting the textDirection of [FlutterDatePickerTimeline].
    this.textDirection,
    // Used for setting the width of selected items.
    this.selectedItemWidth = 170,
    // Used for setting the width of unselected items.
    this.unselectedItemWidth = 38,
    // Used for setting the height of selected and unselected items.
    this.itemHeight = 38,
    // Used for setting the radius of selected and unselected items background.
    this.itemRadius = 10,
    // Used for setting the padding of [ListView].
    this.listViewPadding = const EdgeInsets.only(right: 5.5, left: 5.5),
    // Used for setting the margin of selected items.
    this.selectedItemMargin = const EdgeInsets.only(right: 5.5, left: 5.5),
    // Used for setting the margin of unselected items.
    this.unselectedItemMargin = const EdgeInsets.only(right: 5.5, left: 5.5),
    // Used for setting the color of selected items background.
    this.selectedItemBackgroundColor = const Color(0xFF2B2C30),
    // Used for setting the color of unselected items background.
    this.unselectedItemBackgroundColor = Colors.white,
    // Used for setting the style of selected items [Text].
    this.selectedItemTextStyle,
    // Used for setting the style of unselected items [Text].
    this.unselectedItemTextStyle,
    // Called whenever any date gets selected.
    @required this.onSelectedDateChange,
  }) : super(key: key);

Props

props types defaultValues
calendarMode CalendarMode CalendarMode.gregorian
startDate DateTime
endDate DateTime
initialSelectedDate DateTime?
initialFocusedDate DateTime? If nothing is provided, a [initialSelectedDate] will be used
textDirection TextDirection? If nothing is provided, a [calendarMode] will be used. (CalendarMode.gregorian -> TextDirection.ltr , CalendarMode.jalali -> TextDirection.rtl)
selectedItemWidth double 170
unselectedItemWidth double 38
itemHeight double 38
itemRadius double 10
listViewPadding EdgeInsets const EdgeInsets.only(right: 5.5, left: 5.5)
selectedItemMargin EdgeInsets const EdgeInsets.only(right: 5.5, left: 5.5)
unselectedItemMargin EdgeInsets const EdgeInsets.only(right: 5.5, left: 5.5)
selectedItemBackgroundColor Color const Color(0xFF2B2C30)
unselectedItemBackgroundColor Color Colors.white
selectedItemTextStyle TextStyle? TextStyle(fontFamily: widget.calendarMode == CalendarMode.gregorian ? 'nunito' : 'dana', package: 'flutter_date_picker_timeline', color: widget.unselectedItemBackgroundColor)
unselectedItemTextStyle TextStyle? TextStyle(fontFamily: widget.calendarMode == CalendarMode.gregorian ? 'nunito' : 'dana', package: 'flutter_date_picker_timeline', color: widget.selectedItemBackgroundColor)
onSelectedDateChange DateChangeListener

所属分类

依赖

依赖清单 3 项

源码仓库

使用此插件的项目

暂无相关数据。