Day of the week header disappears when swiping to the left on IOS

[kbups]

Hello, I am using timetable in version v1.0.0-alpha.11 and we encounter a UI problem when swiping calendar to a previous week: the day of the week header disappears. This behavior occurres even if there are events displayed or not and we have to swipe at least twice to the left to view this behavior.

This only appears on IOS (for sure 16.1.1 and on the iPod touch simulator in version 15.5)

Here is an animated GIF showing the problem: Screenshot

Environment:

Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.3.4, on macOS 12.5.1 21G83 darwin-x64, locale fr-FR) [!] Android toolchain - develop for Android devices (Android SDK version 30.0.3) ✗ cmdline-tools component is missing Run path/to/sdkmanager --install "cmdline-tools;latest" See https://developer.android.com/studio/command-line for more details. ✗ Android license status unknown. Run flutter doctor --android-licenses to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/macos#android-setup for more details. [✓] Xcode - develop for iOS and macOS (Xcode 13.4.1) [✓] Chrome - develop for the web [✓] Android Studio (version 3.5) [✓] VS Code (version 1.76.2) [✓] Connected device (4 available) [✓] HTTP Host Availability

• Package version: [v1.0.0-alpha.11]

Here is the code extract use behind:

return TimetableConfig<BasicEvent>(
  // Required:
  dateController: _dateController,
  timeController: _timeController,

  eventBuilder: (context, event) =>
      _buildBasicEventWidget(event as BookingEvent),
  child: MultiDateTimetable<BasicEvent>(
    headerBuilder: (context, leadingWidth) {
      return MultiDateTimetableHeader<BasicEvent>(
        leading: SizedBox(
          width: leadingWidth,
          height: 30,
          child: ValueListenableBuilder<DateTime>(
            valueListenable: (DefaultDateController.of(context)!).date,
            builder: (context, date, _) {
              final style = TimetableTheme.orDefaultOf(context)
                  .weekIndicatorStyleProvider(date.week);
              return Center(
                  child: DecoratedBox(
                decoration: style.decoration,
                child: Padding(
                  padding: style.padding,
                  child: Text(
                    "${DateTimeUtils.dateTimeToMMM(date).toUpperCase()}\nS${date.week.weekOfYear}",
                    textAlign: TextAlign.center,
                    style: style.textStyle,
                  ),
                ),
              ));
            },
          ),
        ),
      );
    },
  ),
  // Optional:
  eventProvider: eventProviderFromFixedList(events),

  callbacks: TimetableCallbacks(
    //   onWeekTap: (week) {
    //     print('onWeekTap');
    //   },
    // onDateTap: (date) {
    //   print('onDateTap');
    // },
    // onDateBackgroundTap: (date) =>
    //     print('Tapped on date background at $date.'),
    onDateTimeBackgroundTap: widget.area.zoning?.type != "BLS" &&
            widget.area.isBookable
        ? (dateTime) {
            if (dateTime.isAfter(DateTime.now())) {
              DateTime dtStartClicked = dateTime
                  .roundTimeToMultipleOf(const Duration(minutes: 15));
              DateTime? dtEndClicked =
                  _getEndDateTime(dtStartClicked, events);

              if (dtEndClicked != null) {
                BookingEvent bookingEvent = BookingEvent.fromDates(
                    dtStartClicked, dtEndClicked);
                _settingModalBottomSheet(context, bookingEvent);
              }
            }
          }
        : null,
  ),
  theme: TimetableThemeData(
    context,
    weekIndicatorStyleProvider: (week) => WeekIndicatorStyle(
      context,
      week,
      decoration: BoxDecoration(
        borderRadius:
            BorderRadius.circular(Constants.defaultBorderRadius / 2),
        color: Constants.primaryColor,
      ),
      padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
      textStyle:
          Theme.of(context).textTheme.headline2!.copyWith(fontSize: 10),
    ),
    timeIndicatorStyleProvider: (time) => TimeIndicatorStyle(
      context,
      time,
      textStyle: Theme.of(context).textTheme.headline2,
    ),
    dateIndicatorStyleProvider: (date) => DateIndicatorStyle(
      context,
      date,
      textStyle: Theme.of(context)
          .textTheme
          .headline2!
          .copyWith(fontSize: 11.5),
    ),
    weekdayIndicatorStyleProvider: (date) => WeekdayIndicatorStyle(
      context,
      date,
      textStyle: Theme.of(context).textTheme.headline2,
    ),
  ),
);

Do you have an idea why this header disappears? Thanks in advance!

[TatsuUkraine]

I had this in a past https://github.com/JonasWanke/timetable/issues/73 But at some point it just started to work normally 🤷‍♂️

[kbups]

Personally I reproduce the bug systematically with the parameters that I indicated in my previous ticket. I don't know if this can help

[JonasWanke]

@kbups I can't reproduce this bug with your provided code using timetable 1.0.0-alpha.12. Can you confirm whether this bug still occurs for you?

[kbups]

I goet this error when upgrading to 1.0.0-alpha.12 :

[+2104 ms] [+3579 ms] ../../../../.pub-cache/hosted/pub.dartlang.org/timetable-1.0.0-alpha.12/lib/src/components/week_indicator.dart:99:20: Error: Member not found: 'MediaQuery.boldTextOf'.
[        ] [   +1 ms]     if (MediaQuery.boldTextOf(context)) {
[        ] [        ]                    ^^^^^^^^^^
[ +602 ms] [ +538 ms] ../../../../.pub-cache/hosted/pub.dartlang.org/timetable-1.0.0-alpha.12/lib/src/date/scroll_physics.dart:55:23: Error: The method 'toleranceFor' isn't defined for the class 'DateScrollPhysics'.
[        ] [        ]  - 'DateScrollPhysics' is from 'package:timetable/src/date/scroll_physics.dart' ('../../../../.pub-cache/hosted/pub.dartlang.org/timetable-1.0.0-alpha.12/lib/src/date/scroll_physics.dart').
[        ] [        ] Try correcting the name to the name of an existing method, or defining a method named 'toleranceFor'.
[        ] [        ]     final tolerance = toleranceFor(position);

Did you upgrade your flutter SDK version? I use 3.3.4

[JonasWanke]

Yes, older Flutter versions are no longer supported. In timetable 1.0.0-alpha.12, I didn't update the minimum Flutter version, hence the build error (#143). Unfortunately, I can't retract that version since it was published more than seven days ago. Timetable 1.0.0-alpha.13 correctly updates the minimum Flutter version to 3.10.0