Search packages, repositories and app categories

flutter_date_picker_timeline cover
Package detailsv0.3.3

flutter_date_picker_timeline

A Gregorian and Jalali customizable date picker as a horizontal timeline

AndroidiOSWebmacOSWindowsLinux
30-day downloads
103
Likes
86
Pub points
130

Install package

flutter pub add flutter_date_picker_timeline

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A customizable date picker for Flutter that displays dates as a horizontal timeline, supporting both Gregorian and Jalali (Persian) calendars. It enables users to select dates intuitively with smooth scrolling and visual feedback. The package is designed for apps requiring date navigation across extended periods, such as scheduling, planning, or calendar-based workflows. It works across all major platforms including Android, iOS, Web, macOS, Windows, and Linux.

Use cases

  • Scheduling applications
  • Calendar-based task planners
  • Event booking interfaces
  • Travel itinerary management
  • Long-term project timelines

Key features

  • Supports Gregorian and Jalali calendars
  • Horizontal scrollable timeline interface
  • Customizable appearance and styling
  • Cross-platform compatibility
  • Smooth date navigation
  • Configurable date range and selection modes

Suitable for

  • Apps needing date selection over long periods
  • Developers targeting Persian-speaking audiences
  • Projects requiring dual calendar support
  • UI-heavy calendar implementations
  • Multi-platform Flutter applications

Considerations

  • May require additional styling for optimal UX
  • Performance with very large date ranges
  • Limited built-in validation beyond date selection
  • Depends on external localization for non-English locales

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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

Categories

Dependencies

Dependency list 3 items

Source repository

Projects using this package

No data available yet.