Monday, June 5, 2023

Flutter horizontal timeline calendar widgets

horizontal timeline with customizable styles

Flutter widget form select a date in horizontal timeline. Flutter widget form select a date in horizontal timeline with customizable styles.

You can use this package when you need to add a date picker that takes up little screen space, so we can always have it visible, and that facilitates use with one hand.


horizontal timeline with customizable styles


run this command:

With Flutter:

 $ flutter pub add calendar_timeline

This will add a line like this to your package’s pubspec.yaml (and run an implicit dart pub get):

  calendar_timeline: ^0.7.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:calendar_timeline/calendar_timeline.dart';


initialDateDateTimeInitial date selected
firstDateDateTimeFirst date available in calendar
lastDateDateTimeLast date available in calendar
selectableDayPredicateSelectableDayPredicateSignature for predicating dates for enabled date selections
onDateSelectedOnDateSelectedCallback to notify that a date has been selected
leftMargindoubleLeft margin to month and day list
monthColorColorColor for month list elements
dayColorColorColor for day list elements
activeDayColorColorColor for selected day text
activeBackgroundDayColorColorColor for selected day background
dotColorColorColor for top dots in select day
localeStringLocale string to get formatted date
showYearsboolIndicates if it show year selector

Use example

You can review the example folder for a complete example of using the widget.

  initialDate: DateTime(2020, 4, 20),
  firstDate: DateTime(2019, 1, 15),
  lastDate: DateTime(2020, 11, 20),
  onDateSelected: (date) => print(date),
  leftMargin: 20,
  monthColor: Colors.blueGrey,
  dayColor: Colors.teal[200],
  activeDayColor: Colors.white,
  activeBackgroundDayColor: Colors.redAccent[100],
  dotsColor: Color(0xFF333A47),
  selectableDayPredicate: (date) => != 23,
  locale: 'en_ISO',