timeline_date_picker

Description:

timeline date picker

Timeline date picker #
Customizable timeline date picker for flutter. Download at pub.dev
Simple Example #
startDate, endDate and onChange are required

handleChange(DateTime date) {
print(date);
}

@override
Widget build(BuildContext context) {
DateTime today = DateTime.now();
DateTime startDate = new DateTime(today.year, today.month - 1, today.day);
DateTime endDate = new DateTime(today.year, today.month + 1, today.day);

return Scaffold(
appBar: AppBar(
title: Text('TimeLine Date Picker'),
),
body: DatePicker(
startDate: startDate,
endDate: endDate,
onChange: handleChange
),
);
}
copied to clipboard
Another Example #
There are four render methods. All are optional if not provided, default renders will be used.

dateRender
selectedDateRender
boxRender
selectedDateRender

Here is an example. Here I'll show you how to use these render methods.

DatePicker(
startDate: startDate,
endDate: endDate,
onChange: handleChange,
size: 60,
dateRender: (date) => Day(date),
boxRender: BoxDecoration(
border: Border(
right: _normalBorderSide(),
top: _normalBorderSide(),
bottom: _normalBorderSide(),
),
),
selectedBoxRender: BoxDecoration(
color: Color(0xFF4186E4).withOpacity(0.12),
border: Border(
right: _normalBorderSide(),
top: _normalBorderSide(),
bottom: _selectedBorderSide(),
),
),
selectedDateRender: (date) => Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
Jiffy(date).format('dd'),
style: TextStyle(fontWeight: FontWeight.w700, color: Color(0xFF4186E4), fontSize: 20),
),
Text(
Jiffy(date).format('EEE'),
style: TextStyle(fontWeight: FontWeight.w600, color: Color(0xFF4186E4), fontSize: 12),
),
],
),
)
copied to clipboard
BorderSide _normalBorderSide() {
return BorderSide(color: Color(0xFFF0F2F8), width: 1);
}

BorderSide _selectedBorderSide() {
return BorderSide(color: Color(0xFF4186E4), width: 3);
}
copied to clipboard
class Day extends StatelessWidget {
final DateTime date;

Day(this.date);

@override
Widget build(BuildContext context) {
Jiffy day = Jiffy(date);

return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
day.format('dd'),
style: TextStyle(fontWeight: FontWeight.w700, color: Color(0xFF8C9AAF), fontSize: 20),
),
Text(
day.format('EEE'),
style: TextStyle(fontWeight: FontWeight.w600, color: Color(0xFFB1BCD0), fontSize: 12),
),
],
);
}
}
copied to clipboard
Your imagination is the limit.