Unknown whilte background coming over event

[mihir-1608]

[shubham-jitiya-simform]

Hi, @mihir-1608
Thank you for reporting this issue. Could you please provide more details about what causes this problem? This information will help us reproduce the issue and work on a fix.

[mihir-1608]

Hello @shubham-jitiya-simform

I am trying add the calendar in a project where you can you all types month,week,day in flutterflow, while switching the UI to week view i get this white color over my title for mobile phone.

[shubham-jitiya-simform]

Hi, @mihir-1608
I tested it on different devices and on the web as well. I suggest you do the same to see if the issue persists. However, I couldn’t reproduce the problem. Since you mentioned FlutterFlow, it would be helpful if you could provide the code snippet.

[mihir-1608]

Hello @shubham-jitiya-simform,

i am sending my code snippet please review it and tell me where i am going wrong

Code Snippet -

// Automatic FlutterFlow imports
import '/backend/schema/structs/index.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:calendar_view/calendar_view.dart';
import 'dart:ui';

// Set your widget name, define your parameter, and then add the
// boilerplate code using the green button on the right!

DateTime get _now => DateTime.now();

class CalendarView extends StatefulWidget {
final double width;
final double height;
final double cellAspectRatio;
final String calendarView;

CalendarView(
{required this.height,
required this.width,
required this.cellAspectRatio,
required this.calendarView});
@OverRide
State createState() => _CalendarViewState();
}

class _CalendarViewState extends State {
// This widget is the root of your application.
@OverRide
Widget build(BuildContext context) {
return CalendarControllerProvider(
controller: EventController()..addAll(_events),
child: widget.calendarView == "month"
? MonthViewWidget(
width: MediaQuery.of(context).size.width,
cellAspectRatio: widget.cellAspectRatio,
)
: widget.calendarView == "week"
? WeekViewWidget(
width: MediaQuery.of(context).size.width,
)
: DayViewWidget(
width: MediaQuery.of(context).size.width,
));
}
}

class MonthViewWidget extends StatelessWidget {
final GlobalKey? state;
final double? width;
final double? cellAspectRatio;
const MonthViewWidget({
super.key,
this.state,
this.width,
this.cellAspectRatio,
});

@OverRide
Widget build(BuildContext context) {
return MonthView(
key: state,
width: width,
initialMonth: _now,
cellAspectRatio: cellAspectRatio ?? 1,
pagePhysics: NeverScrollableScrollPhysics(),
hideDaysNotInMonth: false,
onEventTap: (event, date) {},
onEventLongTap: (event, date) {
SnackBar snackBar = SnackBar(content: Text("on LongTap"));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
);
}
}

class WeekViewWidget extends StatelessWidget {
final GlobalKey? state;
final double? width;

const WeekViewWidget({super.key, this.state, this.width});

@OverRide
Widget build(BuildContext context) {
return WeekView(
key: state,
width: width,
showLiveTimeLineInAllDays: true,
eventArranger: SideEventArranger(maxWidth: 100, includeEdges: false),
timeLineWidth: 55,
heightPerMinute: 2,
minuteSlotSize: MinuteSlotSize.minutes60,
initialDay: _now,
// eventTileBuilder: (date, events, boundary, startDuration, endDuration) {
// return Container(
// height: 50,
// width: 50,
// color: Colors.red,
// );
// },
scrollPhysics: const BouncingScrollPhysics(),
liveTimeIndicatorSettings: LiveTimeIndicatorSettings(
color: Colors.redAccent,
showTime: true,
),
// keepScrollOffset: true,
onTimestampTap: (date) {
SnackBar snackBar = SnackBar(
content: Text("On tap: ${date.hour} Hr : ${date.minute} Min"),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
onEventTap: (events, date) {},
onEventLongTap: (events, date) {
SnackBar snackBar = SnackBar(content: Text("on LongTap"));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
);
}
}

class DayViewWidget extends StatelessWidget {
final GlobalKey? state;
final double? width;

const DayViewWidget({
super.key,
this.state,
this.width,
});

@OverRide
Widget build(BuildContext context) {
return DayView(
key: state,
width: width,
startDuration: Duration(hours: 8),
showHalfHours: false,
heightPerMinute: 2,
timeLineBuilder: _timeLineBuilder,
scrollPhysics: const BouncingScrollPhysics(),
eventArranger: SideEventArranger(maxWidth: 100),
hourIndicatorSettings: HourIndicatorSettings(
color: Theme.of(context).dividerColor, dashSpaceWidth: 1),
onTimestampTap: (date) {
SnackBar snackBar = SnackBar(
content: Text("On tap: ${date.hour} Hr : ${date.minute} Min"),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
onEventTap: (events, date) {},
onEventLongTap: (events, date) {
SnackBar snackBar = SnackBar(content: Text("on LongTap"));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
halfHourIndicatorSettings: HourIndicatorSettings(
color: Theme.of(context).dividerColor,
lineStyle: LineStyle.dashed,
),
verticalLineOffset: 0,
timeLineWidth: 65,
showLiveTimeLineInAllDays: true,
liveTimeIndicatorSettings: LiveTimeIndicatorSettings(
color: Colors.redAccent,
showBullet: false,
showTime: true,
showTimeBackgroundView: true,
),
);
}

Widget _timeLineBuilder(DateTime date) {
if (date.minute != 0) {
return Stack(
clipBehavior: Clip.none,
children: [
Positioned.fill(
top: -8,
right: 8,
child: Text(
"${date.hour}:${date.minute}",
textAlign: TextAlign.right,
style: TextStyle(
color: Colors.red.withAlpha(50),
fontStyle: FontStyle.italic,
fontSize: 12,
),
),
),
],
);
}

final hour = ((date.hour - 1) % 12) + 1;
return Stack(
  clipBehavior: Clip.none,
  children: [
    Positioned.fill(
      top: -8,
      right: 8,
      child: Text(
        "$hour ${date.hour ~/ 12 == 0 ? "am" : "pm"}",
        textAlign: TextAlign.right,
      ),
    ),
  ],
);

}
}

// The list which will be displayed
List _events = [
CalendarEventData(
date: _now,
title: "Project meeting",
description: "Today is project meeting.",
startTime: DateTime(_now.year, _now.month, _now.day, 18, 30),
endTime: DateTime(_now.year, _now.month, _now.day, 22),
),
CalendarEventData(
date: _now.add(Duration(days: 1)),
startTime: DateTime(_now.year, _now.month, _now.day, 18),
endTime: DateTime(_now.year, _now.month, _now.day, 19),
title: "Wedding anniversary",
description: "Attend uncle's wedding anniversary.",
),
CalendarEventData(
date: _now,
startTime: DateTime(_now.year, _now.month, _now.day, 14),
endTime: DateTime(_now.year, _now.month, _now.day, 17),
title: "Football Tournament",
description: "Go to football tournament.",
),
CalendarEventData(
date: _now.add(Duration(days: 3)),
startTime: DateTime(_now.add(Duration(days: 3)).year,
_now.add(Duration(days: 3)).month, _now.add(Duration(days: 3)).day, 10),
endTime: DateTime(_now.add(Duration(days: 3)).year,
_now.add(Duration(days: 3)).month, _now.add(Duration(days: 3)).day, 14),
title: "Sprint Meeting.",
description: "Last day of project submission for last year.",
),
CalendarEventData(
date: _now.subtract(Duration(days: 2)),
startTime: DateTime(
_now.subtract(Duration(days: 2)).year,
_now.subtract(Duration(days: 2)).month,
_now.subtract(Duration(days: 2)).day,
14),
endTime: DateTime(
_now.subtract(Duration(days: 2)).year,
_now.subtract(Duration(days: 2)).month,
_now.subtract(Duration(days: 2)).day,
16),
title: "Team Meeting",
description: "Team Meeting",
),
CalendarEventData(
date: _now.subtract(Duration(days: 2)),
startTime: DateTime(
_now.subtract(Duration(days: 2)).year,
_now.subtract(Duration(days: 2)).month,
_now.subtract(Duration(days: 2)).day,
10),
endTime: DateTime(
_now.subtract(Duration(days: 2)).year,
_now.subtract(Duration(days: 2)).month,
_now.subtract(Duration(days: 2)).day,
12),
title: "Chemistry Viva",
description: "Today is Joe's birthday.",
),
];