Category / Section
How to create timeline Date Picker in Flutter
2 mins read
You can create timeline date picker view using the Flutter Date Range Picker by hiding the view header and setting the numberOfWeeksInView to one in the monthViewSettings properties.
Inside the state, set the default values for the date range picker.
final DateRangePickerController _controller = DateRangePickerController(); final List<String> _months = <String>[ 'JANUARY', 'FEBRUARY', 'MARCH', 'APRIL', 'MAY', 'JUNE', 'JULY', 'AUGUST', 'SEPTEMBER', 'OCTOBER', 'NOVEMBER', 'DECEMBER' ]; bool _selected = false; int _selectedIndex = -1;
Update the display date of the DateRangePickerController using the selected index value.
child: ListView.builder(
shrinkWrap: true,
itemCount: _months.length,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
setState(() {
_selected = true;
_selectedIndex = index;
_controller.displayDate =
DateTime(2021, _selectedIndex, 1, 9, 0, 0);
});
},
child: Container(
padding: const EdgeInsets.only(left: 15, top: 5),
height: 2,
color: Color(0xFF192841),
child: Column(
children: [
Container(
child: Text(_months[index],
style: TextStyle(
color: Colors.white,
fontWeight: _selected &&
_selectedIndex == index
? FontWeight.w900
: FontWeight.w400))),
],
),
));
}),
If the picker cell is selected, show the corresponding weekday in cellBuilder using the selected date in the picker, otherwise show only the dates.
child: SfDateRangePicker(
backgroundColor: Color(0xFF192841),
controller: _controller,
selectionColor: Colors.red.shade400,
view: DateRangePickerView.month,
headerHeight: 0,
cellBuilder: cellBuilder,
monthViewSettings: DateRangePickerMonthViewSettings(
viewHeaderHeight: 0, numberOfWeeksInView: 1),
),
Widget cellBuilder(BuildContext context, DateRangePickerCellDetails details) {
final bool isSelected = _controller.selectedDate != null &&
details.date.year == _controller.selectedDate.year &&
details.date.month == _controller.selectedDate.month &&
details.date.day == _controller.selectedDate.day;
if (isSelected) {
return Column(
children: [
Container(
child: Text(
details.date.day.toString(),
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
),
Container(
child: Text(
DateFormat('EEE').format((details.date)),
style: TextStyle(color: Colors.white),
)),
],
);
} else {
return Container(
child: Text(
details.date.day.toString(),
textAlign: TextAlign.center,
style: TextStyle(color: Colors.tealAccent),
),
);
}
}
