Change visible range dynamically

[eduardothiesen]

I apologize if the feature is already available, but I couldn't find a way to make it work.

I want to give the user the option between 4 visible ranges. 1, 3, 5 and week.

            IconButton(
              icon: Icon(
                Icons.more_vert,
              ),
              onPressed: () {
                showModalBottomSheet(
                  context: context,
                  builder: (context) {
                    return CustomPicker(
                      title: 'Visualização',
                      items: [
                        'Dia',
                        '3 dias',
                        '5 dias',
                        'Semana',
                      ],
                      onSelect: (index) {
                        Navigator.pop(context);
                        setState(() {
                          switch (index) {
                            case 0:
                              visibleRange = VisibleRange.days(1);
                              break;
                            case 1:
                              visibleRange = VisibleRange.days(3);
                              break;
                            case 2:
                              visibleRange = VisibleRange.days(5);
                              break;
                            case 3:
                              visibleRange = VisibleRange.week();
                              break;
                          }
                        });
                      },
                    );
                  },
                  isScrollControlled: false,
                  backgroundColor: Colors.transparent,
                );
              },
            ),

But, the grid does not update after that and keeps the first used VisibleRange (example: if when I created the controller I used VisibleRange.days(5) it always maintain a grid with 5 columns)

My controller code is as follows:

   _controller = TimetableController(
      eventProvider: EventProvider.stream(
        eventGetter: (range) => Stream.periodic(
          Duration(milliseconds: 16),
          (i) {
            final start =
                LocalDate.today().atMidnight() + Period(minutes: i * 2);
            return [
              BasicEvent(
                id: 0,
                title: 'Event',
                color: Colors.blue,
                start: start,
                end: start + Period(hours: 5),
              ),
            ];
          },
        ),
      ),
      initialTimeRange: InitialTimeRange.range(
        startTime: LocalTime(8, 0, 0),
        endTime: LocalTime(20, 0, 0),
      ),
      initialDate: initialDate,
      visibleRange: visibleRange,
      firstDayOfWeek: DayOfWeek.monday,
    );

Below are some screenshots.

Thanks in advance.

[vendelin8]

Hey,

Awesome lib! I was about to check if there's a possibility to change number of days based on mobile orientation, but found the same thing, that I can't change it. This would be very useful for me too. Thanks!

[TatsuUkraine]

I was able to solve this with just rebuilding timetable widget with a different controller instance

[javieralcantara]

Having two different controller instances doesn't solve it to me, could you please explain how you solved it? @TatsuUkraine thanks!

[TatsuUkraine]

Having two different controller instances doesn't solve it to me, could you please explain how you solved it? @TatsuUkraine thanks!

so I have an enum that represents all my range variants, Statefull widget that creates controller in initState and renders timetable itself. In the constructor it receives enum value. Then in didUpdateWidget this stateful widget checks if the enum is changed, and if so - disposes prev controller and creates a new one with a different visible range

[TatsuUkraine]

@javieralcantara sorry, don't pay attention to my prev comment)) I looked at different package)))

in timetable - I'm changing value key for this Statefull widget each time range is changing. This leads to destroy widget with prev range and creating a new range from the scratch

[TatsuUkraine]

but I'm going to change this behavior to a variant with didUpdateWidget (at least I will try))