More design options

[ThexXTURBOXx]

Currently I am rewriting an old app of mine for students of the university that I attend. Back then, I came up with the design seen in the screenshot below.
I like the design and would like the new app to look something similar (with some changes of course) to the old one.
There are two major things in the image I am trying to achieve with timetable currently:

1. Restrict the dates like in feat: Available dates range support #37.
2. Show only one day and list all other possible days to chosse from above

Things that I already accomplished:

• Set the visibleDateRange to 1 day and, thus, only one day is shown in the timetable
• Set the visibleTimeRange to 7.30 AM to 8.30 PM

And now the things I am unsure about:

• Is it already possible to restrict the available dates? In my old application, I marked only the current date and the next 13 days as available and all the other dates are unreachable. I believe, this has been proposed in feat: Available dates range support #37, but I can't find a new equivalent to this feature right now (I read something about DateScrollPhysics somewhere, but can't find the class)
• Is there a - maybe even built-in - timetable type that somehow resembles the old application? I mean, showing only one date and all the other ones can be reached by either scrolling horizontally or by clicking buttons at the top? There is of course the possibility of me implementing that on my own, but if it's built-in, it would be genious! What I am doing right now is to mis-use the MultiDateTimetable for only showing one date at a time (which is somehow counter-intuitive)
• If there is no such timetable type like I described just above, is there a possiblity to completely hide the header of the timetable (completely hide = Hide the labels with W 31 and Tue 3)? If not, how would I go about somehow getting rid of those in order to place my own header there, which features clickable buttons for the available dates?

I think, these are already enough questions and stuff. Thank you very much in advance! :)

Old app:

Current status of the new app:

[JonasWanke]

Restricting the available dates is possible: You can specify the limit in the VisibleDateRange passed to the DateController. This could look like the following in your example:

final dateController = DateController(
  visibleRange: VisibleDateRange.days(
    1, // only show one day at a time
    minDate: DateTimeTimetable.today(),
    maxDate: DateTimeTimetable.today() + 13.days, // both are inclusive
  ),
);

Something like a SingleDateTimetable similar to your screenshot is planned, but not yet implemented. You can, however, customize the MultiDateTimetable to your needs. If you don't need the header at all, you can just use the MultiDateTimetableContent widget (which, together with the MultiDateTimetableHeader widget, composes MultiDateTimetable).

To build the header (except for the month and arrows, for which there's currently no similar widget), you can use DateHeader widgets, which displays the day of the week and month for a given date. These can be placed in a DatePageView with shrinkWrapInCrossAxis set to true, or you just a normal PageView and give it a fixed height.

I hope this answers your questions :)

[ThexXTURBOXx]

Wow, thank you very much! This crazy amount of possibilities to customize the timetable just shows how underrated this library really is. I got most of it working now, but I stumbled upon one or two small things that I am again not sure how to approach correctly:

I want the current date to be highlighted like it is by default (the blue circle in the screenshot below). But, I also like the currently selected date to be highlighted differently. I was trying to pass a custom DateIndicatorStyle to the DateHeader in order to change the DateIndicatorStyle#decoration parameter. As far as I could see in the code, one can't pass a DateIndicatorStyle to the DateHeader or DateHeaderStyle right now (as of 1.0.0-alpha.2). Is there some workaround besides copy-pasting the DateHeader class and tweaking it a little?

Also, one more small thing: I also added a onTap function to the DateHeader, which enables me to click on a date and it automatically animates the MultiDateTimetableContent to the desired date. Is there some way to also get the opposite working? If I swipe the MultiDateTimetableContent to a different date, is there some way to animate (or navigate or even only change) the highlighted selected date (as described above) to the new shown date?

I know that I am just nit-picking with these little details, but if there is a way to accomplish this the clean way, it would be very nice :)

Again, thank you very much! :)

[ThexXTURBOXx]

Also, I noticed a small bug in 1.0.0-alpha.2, I think:

If I use a VisibleDateRange.days or VisibleDateRange.weeks and set their maxDate, the calculations seem to be slightly off what I expect. For example, if I use a VisibleDateRange.days(7,...) and set its minDate to today and maxDate to be 9 days in the future, the shown maxDate ends up at 15 days in the future. If you want to see the code, this is the line I am talking about.
The MultiDateTimetableContent seems to be working correctly, but the DateHeader behaves somehow weird.

[JonasWanke]

Great to hear that :)

You can modify the inner Timetable components by wrapping the header in TimetableTheme:

TimetableTheme(
  data: TimetableThemeData(
    context,
    dateIndicatorStyleProvider:
      (date) => DateIndicatorStyle(context, date, ...),
    weekdayIndicatorStyleProvider:
      (date) => WeekdayIndicatorStyle(context, date, ...),
  ),
  child: <page view with DateHeaders>,
)

FYI: TimetableConfig just combines TimetableTheme and similar InheritedWidgets for convenience, but you can also use those directly.

To change the highlighted DateHeader when MultiDateTimetableContent is swiped to a new date, you should be able to rebuild the header and return an updated style in TimetableThemeData's callback.

To animate the header (assuming you use a DatePageView), you can add a listener to the content's DateController (either directly to it to get notified even of every position change, or to dateController.date to get notified only when the rounded date changes) and then call headerDateController.jumpToPage(contentDateController.value.page) (to sync the exact position) or headerDateController.animateToDate(contentDateController.date.value) (to animate after the date changed).

Regarding your second comment: VisibleDateRange.weeks will modify the maximum range so that the min and max date are visible while still aligning the view to whole weeks. VisibleDateRange.days(7) should not show any days before min or after max, so that might be a bug… (Assuming swipeRange is set to one, which seems to be the case; otherwise, it's similar to .weeks in that the alignment takes priority over not showing dates outside the range.)

[ThexXTURBOXx]

If I could give this library even more thumbs up on pub.dev, I would do that. Thank you very much for your support! Everything is working now (my code isn't that clean yet, but it works)!

Thank you very much! For everyone else wondering, the new code can be found here: ThexXTURBOXx/studipassau@58049ca