Description:
flutter date picker timeline
Flutter Date Picker Timeline #
💥 Gregorian and Jalali customizable date picker as a horizontal timeline 💥
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
copied to clipboard
2 - Install it #
Install packages from the command line
flutter pub get
copied to clipboard
3 - Import it #
Import it to your project
import 'package:flutter_date_picker_timeline/flutter_date_picker_timeline.dart';
copied to clipboard
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);
},
)
copied to clipboard
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);
copied to clipboard
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
License
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
Files:
Customer Reviews
There are no reviews.
