Change data while using Calendar Week in Flutter - flutter

Question

Here I have a form like this. i want to change the value of the blue button week below when i swipe left or right of Calendar Week. What should i do guys ?. It can only changed when I clicked on the number
Here is the code I'm using:
import 'package:flutter/material.dart';
import 'package:myhumgupdate/App/Config/palette.dart';
import 'package:myhumgupdate/Widgets/dialog_loading.dart';
import 'package:myhumgupdate/giangvien/Screens/XemTKB/TKBTheoTuan/tkbtuan_viewmodel.dart';
import 'package:myhumgupdate/Widgets/calender_week.dart';
import 'package:myhumgupdate/giangvien/models/meeting.dart';
import 'package:myhumgupdate/giangvien/models/meetingdata_source.dart';
import 'package:stacked/stacked.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';
class TKBTuan extends StatefulWidget {
#override
_TKBTuanState createState() => _TKBTuanState();
}
final String _customTimeLabelText = 'Tiết';
class _TKBTuanState extends State<TKBTuan> {
#override
Widget build(BuildContext context) {
return ViewModelBuilder<TKBTuanViewModel>.reactive(
onModelReady: (model) => Future.delayed(Duration.zero,
() => DialogLoading.show(context, model.getTkbTuan(model.timeNow))),
builder: (context, TKBTuanViewModel model, child) => Column(
children: [
Row(
children: [
Expanded(
child: Container(
margin: EdgeInsets.only(
top: 18,
),
child: CalendarWeek(
calendarController: model.calendarController,
press: (DateTime date, _, __) {
model.getTkbTuan(date);
},
),
),
),
Container(
width: 40,
height: 56,
margin: EdgeInsets.only(right: 3),
padding: EdgeInsets.symmetric(horizontal: 4, vertical: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Palette.kPrimaryColor,
),
child: Center(
child: Text(
"Week ${model.week}",
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
),
],
),
Expanded(
child: SfCalendar(
view: CalendarView.week,
firstDayOfWeek: 1,
maxDate: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day, 00, 45, 0),
minDate: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day, 00, 45, 0),
headerHeight: 0,
viewHeaderHeight: 0,
dataSource: MeetingDataSource(model.getDataSource),
appointmentTimeTextFormat: 'hh:mm:ss a',
appointmentBuilder: appointmentBuilder,
initialDisplayDate: DateTime(DateTime.now().year,
DateTime.now().month, DateTime.now().day, 00, 45, 0),
monthViewSettings: MonthViewSettings(showAgenda: true),
timeSlotViewSettings: TimeSlotViewSettings(
startHour: 0,
endHour: 16,
timeFormat: _customTimeLabelText + " H",
timeIntervalHeight: 70,
timeTextStyle: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
)),
// selectionDecoration: BoxDecoration(
// color: Colors.transparent,
// border: Border.all(color: Colors.red, width: 1),
// borderRadius: const BorderRadius.all(Radius.circular(4)),
// shape: BoxShape.rectangle,
// ),
),
),
],
),
viewModelBuilder: () => TKBTuanViewModel());
}
}
Widget appointmentBuilder(BuildContext context,
CalendarAppointmentDetails calendarAppointmentDetails) {
final Meeting appointment = calendarAppointmentDetails.appointments.first;
return Container(
width: calendarAppointmentDetails.bounds.width,
height: calendarAppointmentDetails.bounds.height,
// color: appointment.background,
decoration: BoxDecoration(
color: appointment.background,
border: Border.all(
color: Colors.grey,
width: 0.5,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(2.0, 0, 0, 5.0),
child: Text(
appointment.eventName,
// textAlign: TextAlign.center,
style: TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(2.0, 0, 0, 0),
child: Text(
"Phòng: ${appointment.subText}",
style: TextStyle(fontSize: 10, fontStyle: FontStyle.italic),
),
)
],
),
);
}
And if there is no way to change the value like that, what should I do and how can I change that?

Answer 1

In the Flutter Event Calendar, you can programmatically select the date using selectedDate property of the CalendarController.
Inside the state, initialize the calendar controller.
final CalendarController _calendarController= CalendarController();
Using onViewChanged callback of the Flutter event calendar, you can set the first date of visible dates as selected date.
child: SfCalendar(
view: CalendarView.month,
controller: _calendarController,
onViewChanged: viewChanged,
),
void viewChanged(ViewChangedDetails viewChangedDetails) {
SchedulerBinding.instance!.addPostFrameCallback((Duration duration) {
_calendarController.selectedDate = viewChangedDetails.visibleDates[0];
});
}
Wrap your Widget in GestureDetector and use onPanUpdate like this:
GestureDetector(onPanUpdate: (details) {
if (details.delta.dx > 0) {
// swiping in right direction
// update week number
}
});