Category / Section
How to create timeline Date Picker in Flutter
2 mins read
You can create timeline date picker view using Flutter Date Range Picker by hiding the view header and numberOfWeeksInView to one in monthViewSettings properties.
Inside the state, set the default values for 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 the dates only.
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),
),
);
}
}
