Add scrolling to a specific date

[kodeslaw]

Finally someone made reusable vertical scrolling calendar!

Add a function to scroll with and without animation to a specific date - e.g. if you want to display a calendar focused at a specific date or programmatically control pagination (e.g. through other widgets).

[casvanluijtelaar]

should be possible for me to expose the scroll controller to allow you to create your own scroll animations

[casvanluijtelaar]

scrollController parameter is currently available on the master branch and will be included on the next update

[faslurrajah]

Even we have scroll controller, we can't move to specific date right? We can move to a specific scroll position. Lets say my calender starts from 2019 Jan , and I want to see 2022 Jan as first month, how can I use scroll controller here?

[casvanluijtelaar]

Even we have scroll controller, we can't move to specific date right? We can move to a specific scroll position. Lets say my calender starts from 2019 Jan , and I want to see 2022 Jan as first month, how can I use scroll controller here?

There's no direct interface implemented for that but it shouldn't be to hard to calculate the month position by taking your widget's heights into account. Then it's just calculating the Offset by multiplying the amount of months from your start date with the months widget height.

The only thing I don't know for sure is how a scroll controller acts with paginated data. But if you set your precalculated months to a higher value it shouldn't be an issue I'd think. Depending on your animation speed of course.

I could add an interface for this if there's enough interested for it but then we run into issue where people might be using the calendar to load async data and I don't want to flood their systems with 20 requests just to animate to the next year.

I'd rather keep this package minimalistic to allow you to build these specific use cases on top of it yourself.

[casvanluijtelaar]

Of you don't want to do this your self this package might help you.

[desmeit]

@casvanluijtelaar is this package recognizing the individual height of each month?

[casvanluijtelaar]

@casvanluijtelaar is this package recognizing the individual height of each month?

It might, I haven't tested it but it seems to says it does what you are looking.for

[mhmzdev]

Even we have scroll controller, we can't move to specific date right? We can move to a specific scroll position. Lets say my calender starts from 2019 Jan , and I want to see 2022 Jan as first month, how can I use scroll controller here?

There's no direct interface implemented for that but it shouldn't be to hard to calculate the month position by taking your widget's heights into account. Then it's just calculating the Offset by multiplying the amount of months from your start date with the months widget height.

The only thing I don't know for sure is how a scroll controller acts with paginated data. But if you set your precalculated months to a higher value it shouldn't be an issue I'd think. Depending on your animation speed of course.

I could add an interface for this if there's enough interested for it but then we run into issue where people might be using the calendar to load async data and I don't want to flood their systems with 20 requests just to animate to the next year.

I'd rather keep this package minimalistic to allow you to build these specific use cases on top of it yourself.

Can you please share a bare minimal code for this? Actually we are trying but not able to figure out how to scroll to selected date. @casvanluijtelaar

[JoakimSA]

I am still waiting for it, I try to implement it but not working :(

[mhmzdev]

@JoakimSA I've implemented it with a work-around Here are the steps:

• Attach a scroll controller to calendar
• Save the offset of controller to a variable in state
• on initState simply check if the offset is not null then scrollController.animateTo(offset, ...)

for now this is working fine for me

[JoakimSA]

@mhmzdev Thanks for your help, are you give us a generic example ?

[mhmzdev]

@JoakimSA please use this as initial code I've not tested it, just copied the required logic from where I've used this.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class _State extends ChangeNotifier {
  static _State s(BuildContext context, [bool listen = false]) =>
      Provider.of<_State>(context, listen: listen);

  final controller = ScrollController();

  double? offset;
  void setOffSet(double value) {
    offset = value;
  }
}

class VertCalendar extends StatefulWidget {
  const VertCalendar({super.key});

  @override
  State<VertCalendar> createState() => _VertCalendarState();
}

class _VertCalendarState extends State<VertCalendar> {
  @override
  void initState() {
    super.initState();

    final state = _State.s(context);
    final offset = state.offset;

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      if (offset != null) {
        state.controller.animateTo(
          offset,
          duration: const Duration(milliseconds: 250),
          curve: Curves.easeInOut,
        );
      }
    });

    state.controller.addListener(() {
      state.setOffSet(state.controller.offset);
    });
  }

  @override
  Widget build(BuildContext context) {
    final state = _State.s(context, true);

    return Scaffold(
      body: PagedVerticalCalendar(
        scrollController: state.controller,
      ),
    );
  }
}