Блог

Вот у меня есть такая форма. я хочу изменить значение синей кнопки неделя ниже, когда я провожу пальцем влево или вправо от Календарной недели. Что мне делать, ребята ?. Это может измениться только тогда, когда я нажму на номер

Вот код, который я использую:

     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),
          ),
        )
      ],
    ),
  );
}
 

И если нет возможности изменить значение подобным образом, что мне следует делать и как я могу это изменить?

В Календаре событий Flutter вы можете программно выбрать дату, используя selectedDate свойство CalendarController.

Внутри состояния инициализируйте контроллер календаря.

 final CalendarController _calendarController= CalendarController();
 

Используя обратный вызов onViewChanged календаря событий Flutter, вы можете установить первую дату из видимых дат в качестве выбранной даты.

 child: SfCalendar(
  view: CalendarView.month,
  controller: _calendarController,
  onViewChanged: viewChanged,
),
void viewChanged(ViewChangedDetails viewChangedDetails) {
  SchedulerBinding.instance!.addPostFrameCallback((Duration duration) {
    _calendarController.selectedDate = viewChangedDetails.visibleDates[0];
  });
}
 

Оберните свой виджет GestureDetector и используйте onPanUpdate вот так:

 GestureDetector(onPanUpdate: (details) {
  if (details.delta.dx > 0) {
    // swiping in right direction
    // update week number
  }
});