Make selected date always the middle one

[SpajicM]

Hi, I'd like to make it so that if you have a timeline with 7 days, selected date is always in the middle (fourth day), and you slide left/right between them.

[iamvivekkaushik]

Hi @SpajicM, this is a different UI than then one I have created. It's a good idea to implement. If I get time to work on it I will add this. It can take a while though.

[Sub6Resources]

I created a fork that centers the selected date (you can use it at https://github.com/Sub6Resources/DatePickerTimelineFlutter). @iamvivekkaushik I would open a pull request, but I added quite a few breaking changes. If you happen to review my commit and see that the changes are desirable, I can open a pull request.

[SpajicM]

Not working as expected.

[iamvivekkaushik]

I am really busy these days and have almost no time to work on this. @Sub6Resources since your version is breaking changes I will take a look at your version of the code and make changes to this accordingly.

[pavanmspersonalgit]

Hey, requesting for the same feature. To fix the selected date as center and keep the initial date as last. Kindly help out by adding that feature.

[gabera]

one more vote for this feature. It would be nice if the selected date was in the center or at least visible

[alierdogan7]

Make a stateful widget and then in initState function call DatePickerController's animation methods such as animateToDate, animateToSelection, etc.

For example, the code snippet below initializes a date picker and then immediately animates to two days back (in order for the selected date to appear at center):

class _HorizontalDatePickerState extends ConsumerState<HorizontalDatePicker> {
  final controller = DatePickerController();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback(
        (_) => controller.animateToDate(widget.selectedDate.subtract(Duration(days: 2))));
  }

  @override
  Widget build(BuildContext context) {
    return DatePicker(
      widget.startDate,
      initialSelectedDate: widget.selectedDate,
      selectionColor: Theme.of(context).colorScheme.primary,
      selectedTextColor: Colors.white,
      locale: ref.watch(appLocaleProvider.notifier).getLocaleString(),
      onDateChange: (date) => widget.onDateChange(date),
      controller: controller,
    );
  }
}