在flutter中使用水平日历中的控制器滚动当前和上周

如何解决在flutter中使用水平日历中的控制器滚动当前和上周

我正在制作一个包含当前周和上周的水平日历。 它看起来像这样：

现在假设这是当前周，我想启用滚动，就像用户从左到右滚动前一周一样，现在当我滚动它时，它会一一显示每个日期。我认为它可以通过滚动控制器启用，但我无法做到。对于这个列表，我使用了一个列表视图构建器，它构建了 14 个项目，即本周和上周的天数

我的代码：

class MyInheritedWidget extends InheritedWidget {

  final DateTime date;
  final List<DateTime> bothWeek;
  final DateTime currentdate;
  final DateTime currentWeekFirstDay;
  final DateTime currentWeekLastDay;
  final DateTime prevIoUsWeekFirstDay;
  final DateTime prevIoUsWeekLastDay;
  final int selectedDay;
  final int monthDateCount;
  final bool isDateHolderActive;
  final Map<int,bool> dayAvailabilityMap;
  final ValueChanged<bool> toggleDateHolderActive;
  final ValueChanged<int> setSelectedDay;

  MyInheritedWidget({
    Key key,this.date,this.currentdate,this.bothWeek,this.currentWeekLastDay,this.currentWeekFirstDay,this.prevIoUsWeekFirstDay,this.prevIoUsWeekLastDay,this.selectedDay,this.monthDateCount,this.isDateHolderActive,this.dayAvailabilityMap,this.toggleDateHolderActive,this.setSelectedDay,Widget child,}) : super(key: key,child: child);

  @override
  bool updateShouldNotify(MyInheritedWidget oldWidget) {
    return oldWidget.selectedDay != selectedDay ||
        oldWidget.toggleDateHolderActive != toggleDateHolderActive;
  }
}

class DateIndicatorPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            DateIndicator(),Expanded(
              child: Container(),),],);
  }
}


class DateIndicator extends StatefulWidget {
  static MyInheritedWidget of(BuildContext context) => context.dependOnInheritedWidgetofExactType();

  @override
  _DateIndicatorState createState() => _DateIndicatorState();
}

class _DateIndicatorState extends State<DateIndicator> {
  DateTime date = DateTime.Now();
  DateTime currentdate=DateTime.Now();
  List<DateTime> bothWeek=[];
  DateTime currentWeekFirstDay;
  DateTime currentWeekLastDay;
  DateTime prevIoUsWeekFirstDay;
  DateTime prevIoUsWeekLastDay;
  int selectedDay = 1;
  int monthDateCount = 1;
  bool isDateHolderActive = false;
  bool _isButtondisabled;

  void toggleDateHolderActive(bool flag) {
    setState(() {
      isDateHolderActive = flag;
    });
  }

  void setSelectedDay(int index) {
    setState(() {
      selectedDay = index;
    });
  }

  DateTime findFirstDateOfTheWeek(DateTime dateTime) {
    return dateTime.subtract(Duration(days: dateTime.weekday - 1));
  }

  DateTime findLastDateOfTheWeek(DateTime dateTime) {
    return dateTime.add(Duration(days: DateTime.daysPerWeek - dateTime.weekday));
  }

  DateTime findFirstDateOfPrevIoUsWeek(DateTime dateTime) {
    final DateTime sameWeekDayOfLastWeek =
    dateTime.subtract(const Duration(days: 7));
    return findFirstDateOfTheWeek(sameWeekDayOfLastWeek);
  }

  DateTime findLastDateOfPrevIoUsWeek(DateTime dateTime) {
    final DateTime sameWeekDayOfLastWeek =
    dateTime.subtract(const Duration(days: 7));
    return findLastDateOfTheWeek(sameWeekDayOfLastWeek);
  }

  void getDaysInBetweenBothWeek(DateTime startDate,DateTime endDate) {
    for (int i = 0; i <= endDate.difference(startDate).inDays; i++) {
      bothWeek.add(startDate.add(Duration(days: i)));
    }
  }


  @override
  void initState() {
    _isButtondisabled=false;
    final DateTime dateForValues =DateTime(date.year,date.month+1,0);
    monthDateCount = dateForValues.day;
    print("month $monthDateCount");

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    currentWeekFirstDay=findFirstDateOfTheWeek(currentdate);
    currentWeekLastDay=findLastDateOfTheWeek(currentdate);
    prevIoUsWeekFirstDay=findFirstDateOfPrevIoUsWeek(currentdate);
    prevIoUsWeekLastDay=findLastDateOfPrevIoUsWeek(currentdate);
    getDaysInBetweenBothWeek(prevIoUsWeekFirstDay,currentWeekLastDay);
    print("dates $bothWeek");

    return Container(
      margin: EdgeInsets.only(top: 150),child: Column(
        children: [
          IconButton(
            icon:Icon(Icons.chevron_right),color: Colors.black,Container(
            width: MediaQuery.of(context).size.width,height: 68.0,padding:
            const EdgeInsets.only(left: 7.0,right: 3.0,top: 2.0,bottom: 2.0),decoration: Boxdecoration(
              color: Theme.of(context).secondaryHeaderColor,BoxShadow: [
                BoxShadow(
                    color: Colors.blueAccent.withOpacity(.7),offset: Offset(0.0,.5),blurRadius: 3.0,spreadRadius: 0.3),child: ListView.builder(
                scrollDirection: Axis.horizontal,itemCount: 14,itemBuilder: (BuildContext context,int index) {
                  return MyInheritedWidget(
                      date: date,currentWeekFirstDay: currentWeekFirstDay,currentWeekLastDay: currentWeekLastDay,prevIoUsWeekFirstDay: prevIoUsWeekFirstDay,prevIoUsWeekLastDay: prevIoUsWeekLastDay,currentdate: currentdate,selectedDay: selectedDay,bothWeek: bothWeek,monthDateCount: monthDateCount,isDateHolderActive: isDateHolderActive,toggleDateHolderActive: toggleDateHolderActive,setSelectedDay: setSelectedDay,child: DateHolder(index,currentdate,date,currentWeekLastDay,currentWeekFirstDay,bothWeek,prevIoUsWeekFirstDay,prevIoUsWeekLastDay));
                }),IconButton(
            icon:Icon(Icons.chevron_left),)
        ],);
  }
}

class DateHolder extends StatelessWidget {
  static MyInheritedWidget of(BuildContext context) => context.dependOnInheritedWidgetofExactType();

  DateHolder(this.index,this.prevIoUsWeekLastDay);

  final int index;
  final DateTime currentWeekFirstDay;
  final List<DateTime> bothWeek;
  final DateTime currentWeekLastDay;
  final DateTime prevIoUsWeekFirstDay;
  final DateTime prevIoUsWeekLastDay;
  final DateTime date;
  final DateTime currentdate;

  final Widget activeBubble = Container(
    width: 15.0,height: 15.0,decoration: Boxdecoration(
      shape: BoxShape.circle,color: Colors.deepOrangeAccent,);

  @override
  Widget build(BuildContext context) {
    bool isSelectedDate = date.compareto(currentdate) == 0;
    final appState = DateIndicator.of(context);
    print("current week days:${bothWeek[index].weekday}");

    return InkWell(
      onTap: () {
        appState.toggleDateHolderActive(true);
        appState.setSelectedDay(index);
        print("Date $index selected!");
      },child: Stack(
        children: <Widget>[
          Column(
            children: <Widget>[
              Container(
                  margin: const EdgeInsets.only(right: 5.0),child: Text(

                    ///? TO CHECK

                    "${DateFormat('EEEE').format(DateTime(appState.date.year,appState.date.month,bothWeek[index].weekday)).substring(0,1)}",style: TextStyle(color: Theme.of(context).primaryColor,fontSize: 12.0),)),Container(
                width: 45.0,height: 45.0,margin: const EdgeInsets.only(right: 5.0),decoration: Boxdecoration(
                  shape: BoxShape.circle,color: !isSelectedDate? Colors.orange:Colors.white,border: (index == (appState.selectedDay) &&
                      appState.isDateHolderActive == true)
                      ? Border.all(width: 2.0,color: Theme.of(context).primaryColor)
                      : Border.all(color: Colors.transparent),child: Padding(
                  padding: const EdgeInsets.all(8.0),child: Center(
                    child: Text(
                      "${bothWeek[index].day}",// to avoid showing zero
                      style: TextStyle(color: Theme.of(context).primaryColor,fontSize: 16.0),(appState.dayAvailabilityMap[index] ?? false)
              ? Positioned(right: 8.0,bottom: 5.0,child: activeBubble)
              : Container(),);
  }
}

如果有人能告诉我如何实现这个功能会很有帮助

第二个问题： 我面临第二个小问题，所以我想把它包括在这里 问题是在 dateformat 语句中打印天数时显示错误的天数，而在 bothweek 列表中日期范围是正确的，例如今天是 1 月 6 日，它是星期三，但显示的是星期日。

如果还有其他人认为需要解决问题，请告诉我 谢谢你！！