Layout issue on landscape Tablet

[Paroca72]

Hello,

On smartphone, locked in portrait, all good.
On tablet, locked in landscape, WeekView and DayView, wrong the layout.

Following my code to create the views.

        HeaderStyle headerStyle = const HeaderStyle(
          decoration: BoxDecoration(color: Themes.plannerHeaderBackgroundColor),
          headerTextStyle: TextStyle(fontWeight: FontWeight.bold),
        );

        // Create the views
        final List<Widget> views = [
          DayView(
            headerStyle: headerStyle,
            timeLineWidth: 60,
            dateStringBuilder: (date, {secondaryDate}) => date.toDisplay(),
            timeStringBuilder: (date, {secondaryDate}) =>
                date.toTime().toDisplay(),
            onDateTap: (date) => _createAppointment(context, date),
            onEventTap: (events, date) {
              AppointmentModel? appointment =
                  events.last.event as AppointmentModel?;
              _createAppointment(context, date, appointment?.id);
            },
          ),
          WeekView(
            headerStyle: headerStyle,
            timeLineWidth: 60,
            headerStringBuilder: (date, {secondaryDate}) =>
                "${date.toDisplay()} ${"Common.To".tr().toLowerCase()} ${secondaryDate!.toDisplay()}",
            timeLineStringBuilder: (date, {secondaryDate}) =>
                date.toTime().toDisplay(),
            onDateTap: (date) => _createAppointment(context, date),
            onEventTap: (events, date) {
              AppointmentModel? appointment =
                  events.last.event as AppointmentModel?;
              _createAppointment(context, date, appointment?.id);
            },
          ),
          MonthView(
            headerStyle: headerStyle,
            headerStringBuilder: (date, {secondaryDate}) =>
                "${date.monthName()} ${date.year}",
            onCellTap: (_, date) => _createAppointment(context, date),
            onEventTap: (event, date) {
              AppointmentModel? appointment = event.event as AppointmentModel?;
              _createAppointment(context, date, appointment?.id);
            },
          ),
        ];

Very thanks for your help
Sam

[PRBaraiya]

Hi @Paroca72 , For this you need to provide the width in WeekView. We will try to remove the width dependency in the near future but till then please provide width if you are not displaying the calendar view in full-screen width.

You can use LayoutBuilder to get the width of parent widget and pass it to week view.