Flutter 颤振-在日历插件中创建动态标记事件

我想每

4天标记一次事件

今天的例子是

1st

，

5th

，

10th

，

15th

，

20th

，

25th

，

30th

，等等

如果今天是

3日

，则该活动将于

8日

、

13日

、

18日等时间举行

该功能是如何工作的？

我使用这个日历插件


以下是手动标记事件的功能：

EventList<Event> _markedDateMap = new EventList<Event>();

   build(){
       _calendarCarouselNoHeader = CalendarCarousel<Event>(
       ...
       markedDatesMap: _markedDateMap,
       ...
       ),
    }

 @override
  void initState() {

     _markedDateMap.add(
         new DateTime(2020, 2, 26),
        new Event(
         date: new DateTime(2020, 2, 26),
         title: 'Event 5',
         icon: _eventIcon,
         ));

     _markedDateMap.add(
         new DateTime(2020, 2, 26),
        new Event(
         date: new DateTime(2020, 2, 26),
         title: 'Event 5',
         icon: _eventIcon,
         ));

    super.initState();
}

EventList\u markedDateMap=neweventlist（）；
构建（）{
_calendarCarouselNoHeader=CalendarCarousel(
...
markedDatesMap:_markedDateMap，
...
),
}
@凌驾
void initState（）{
_markedDateMap.add(
新日期时间（2020年2月26日），
新事件(
日期：新日期时间（2020年2月26日），
标题：“事件5”，
图标：_eventIcon，
));
_markedDateMap.add(
新日期时间（2020年2月26日），
新事件(
日期：新日期时间（2020年2月26日），
标题：“事件5”，
图标：_eventIcon，
));
super.initState（）；
}

任何人都将不胜感激。
您可以复制粘贴并运行下面的完整代码

使用

addMarker(DateTime(2020, 2, 01));
addMarker(DateTime(2020, 2, 03));

代码片段

addMarker(DateTime startEventDateTime) {

    var eventDateTime = startEventDateTime;

    for(int i=0; i<5; i++) {
      if(eventDateTime.day == 1) {
        eventDateTime = eventDateTime.add(Duration(days: (4)));
      } else {
        eventDateTime = eventDateTime.add(Duration(days: (5)));
      }
      print(eventDateTime.toLocal());
      _markedDateMap.add(
          eventDateTime,
          Event(
            date: eventDateTime,
            title: 'Event $i',
            icon: _eventIcon,
          ));

    }
  }

addMarker（日期时间开始日期时间）{
var eventDateTime=startEventDateTime；
对于（int i=0；i运行应用程序（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“dooboolab颤振日历”，
主题：主题数据(
主样本：颜色。蓝色，
),
主页：MyHomePage（标题：“颤振日历旋转木马示例”），
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage（{Key，this.title}）：超级（Key:Key）；
最后的字符串标题；
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
DateTime _currentDate=DateTime（2020,2,17）；
DateTime _currentDate2=日期时间（2020,2,17）；
字符串_currentmount=DateFormat.yMMM（）.format（DateTime（2020,2,17））；
DateTime _targetDateTime=DateTime（2020,2,17）；
//列表_markedDate=[日期时间（2018,9,20），日期时间（2018,10,11）]；
静态小部件_eventIcon=容器(
装饰：盒子装饰(
颜色：颜色，白色，
borderRadius:borderRadius.all（半径圆形（1000）），
边框：边框。全部（颜色：Colors.blue，宽度：2.0）），
子：图标(
一个人，
颜色：颜色。琥珀色，
),
);
EventList _markedDateMap=EventList（）；
日历转盘_日历转盘，_日历转盘头；
@凌驾
void initState（）{
addMarker（日期时间（2020年2月3日））；
super.initState（）；
}
addMarker（日期时间开始日期时间）{
var eventDateTime=startEventDateTime；
对于（int i=0；i_currentDate=date）；
events.forEach（（event）=>print（event.title））；
},
weekendTextStyle:TextStyle(
颜色：颜色，红色，
),
本月DayBorderColor:颜色。灰色，
//工作日：null，///当您不想渲染工作日时，用于传递null
headerText:“自定义标题”，
//标记日期：_标记日期，
周格式：是的，
markedDatesMap:_markedDateMap，
高度：200.0，
selectedDateTime:\u currentDate2，
showIconBehindDayText:true，
//DayshaveCircularOrder:false，///null表示不呈现任何边框，true表示圆形边框，false表示矩形边框
customGridViewPhysics:NeverScrollableScrollPhysics（），
markedDateShowIcon：正确，
markedDateIconMaxShown:2，
selectedDayTextStyle:TextStyle(
颜色：颜色，黄色，
),
todayTextStyle:TextStyle(
颜色：颜色，蓝色，
),
markedDateIconBuilder:（事件）{
返回event.icon；
},
minSelectedDate:_currentDate.subtract（持续时间：360天）），
maxSelectedDate:_currentDate.add（持续时间：360天）），
今天的按钮颜色：Colors.transparent，
todayBorderColor:Colors.green，
markedDateMoreShowTotal：
false，//null表示不显示隐藏事件指示器
//markedDateIconMargin:9，
//markedDateIconOffset:3，
);
///不带标题和自定义“上一步和下一步”按钮的日历转盘示例
_calendarCarouselNoHeader=CalendarCarousel(
todayBorderColor:Colors.green，
onDayPressed：（日期时间日期，列出事件）{
此.setState（（）=>\u currentDate2=日期）；
events.forEach（（event）=>print（event.title））；
},
Daysharder：是的，
仅显示当前月份日期：false，
weekendTextStyle:TextStyle(
颜色：颜色，红色，
),
本月DayBorderColor:颜色。灰色，
周格式：假，
//星期一：4，
markedDatesMap:_markedDateMap，
高度：420.0，
selectedDateTime:\u currentDate2，
targetDateTime:_targetDateTime，
customGridViewPhysics:NeverScrollableScrollPhysics（），
MarkedDateCustomShapeOrder:CircleBorder(
边：边框边（颜色：颜色。黄色）
),
markedDateCustomTextStyle:TextStyle(
尺码：18，
颜色：颜色，蓝色，
),
showHeader:false，
//markedDateIconBuilder:（事件）{
//返回容器(
//颜色：颜色，蓝色，
//   );
// },
todayTextStyle:TextStyle(
颜色：颜色，蓝色，
),
今天的按钮颜色：颜色。黄色，
selectedDayTextStyle:TextStyle(
颜色：颜色，黄色，
),
minSelectedDate:_currentDate.subtract（持续时间：360天）），
maxSelectedDate:_currentDate.add（持续时间：360天）），
prevDaysTextStyle:TextStyle(
尺寸：16，
颜色：Colors.pinkAccent，
),
inactiveDaysTextStyle:TextStyle(
颜色：科洛
import 'package:flutter/material.dart';

import 'package:flutter_calendar_carousel/flutter_calendar_carousel.dart'
    show CalendarCarousel;
import 'package:flutter_calendar_carousel/classes/event.dart';
import 'package:flutter_calendar_carousel/classes/event_list.dart';
import 'package:intl/intl.dart' show DateFormat;

void main() => runApp( MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      title: 'dooboolab flutter calendar',
      theme:  ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:  MyHomePage(title: 'Flutter Calendar Carousel Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  DateTime _currentDate = DateTime(2020, 2, 17);
  DateTime _currentDate2 = DateTime(2020, 2, 17);
  String _currentMonth = DateFormat.yMMM().format(DateTime(2020, 2, 17));
  DateTime _targetDateTime = DateTime(2020, 2, 17);
//  List<DateTime> _markedDate = [DateTime(2018, 9, 20), DateTime(2018, 10, 11)];
  static Widget _eventIcon =  Container(
    decoration:  BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(1000)),
        border: Border.all(color: Colors.blue, width: 2.0)),
    child:  Icon(
      Icons.person,
      color: Colors.amber,
    ),
  );

  EventList<Event> _markedDateMap = EventList<Event>();
  CalendarCarousel _calendarCarousel, _calendarCarouselNoHeader;

  @override
  void initState() {
   addMarker(DateTime(2020, 2, 03));
    super.initState();
  }

  addMarker(DateTime startEventDateTime) {

    var eventDateTime = startEventDateTime;

    for(int i=0; i<5; i++) {
      if(eventDateTime.day == 1) {
        eventDateTime = eventDateTime.add(Duration(days: (4)));
      } else {
        eventDateTime = eventDateTime.add(Duration(days: (5)));
      }
      print(eventDateTime.toLocal());
      _markedDateMap.add(
          eventDateTime,
          Event(
            date: eventDateTime,
            title: 'Event $i',
            icon: _eventIcon,
          ));

    }
  }

  @override
  Widget build(BuildContext context) {
    /// Example with custom icon
    _calendarCarousel = CalendarCarousel<Event>(
      onDayPressed: (DateTime date, List<Event> events) {
        this.setState(() => _currentDate = date);
        events.forEach((event) => print(event.title));
      },
      weekendTextStyle: TextStyle(
        color: Colors.red,
      ),
      thisMonthDayBorderColor: Colors.grey,
//          weekDays: null, /// for pass null when you do not want to render weekDays
      headerText: 'Custom Header',
//          markedDates: _markedDate,
      weekFormat: true,
      markedDatesMap: _markedDateMap,
      height: 200.0,
      selectedDateTime: _currentDate2,
      showIconBehindDayText: true,
//          daysHaveCircularBorder: false, /// null for not rendering any border, true for circular border, false for rectangular border
      customGridViewPhysics: NeverScrollableScrollPhysics(),
      markedDateShowIcon: true,
      markedDateIconMaxShown: 2,
      selectedDayTextStyle: TextStyle(
        color: Colors.yellow,
      ),
      todayTextStyle: TextStyle(
        color: Colors.blue,
      ),
      markedDateIconBuilder: (event) {
        return event.icon;
      },
      minSelectedDate: _currentDate.subtract(Duration(days: 360)),
      maxSelectedDate: _currentDate.add(Duration(days: 360)),
      todayButtonColor: Colors.transparent,
      todayBorderColor: Colors.green,
      markedDateMoreShowTotal:
      false, // null for not showing hidden events indicator
//          markedDateIconMargin: 9,
//          markedDateIconOffset: 3,
    );

    /// Example Calendar Carousel without header and custom prev & next button
    _calendarCarouselNoHeader = CalendarCarousel<Event>(
      todayBorderColor: Colors.green,
      onDayPressed: (DateTime date, List<Event> events) {
        this.setState(() => _currentDate2 = date);
        events.forEach((event) => print(event.title));
      },
      daysHaveCircularBorder: true,
      showOnlyCurrentMonthDate: false,
      weekendTextStyle: TextStyle(
        color: Colors.red,
      ),
      thisMonthDayBorderColor: Colors.grey,
      weekFormat: false,
//      firstDayOfWeek: 4,
      markedDatesMap: _markedDateMap,
      height: 420.0,
      selectedDateTime: _currentDate2,
      targetDateTime: _targetDateTime,
      customGridViewPhysics: NeverScrollableScrollPhysics(),
      markedDateCustomShapeBorder: CircleBorder(
          side: BorderSide(color: Colors.yellow)
      ),
      markedDateCustomTextStyle: TextStyle(
        fontSize: 18,
        color: Colors.blue,
      ),
      showHeader: false,
      // markedDateIconBuilder: (event) {
      //   return Container(
      //     color: Colors.blue,
      //   );
      // },
      todayTextStyle: TextStyle(
        color: Colors.blue,
      ),
      todayButtonColor: Colors.yellow,
      selectedDayTextStyle: TextStyle(
        color: Colors.yellow,
      ),
      minSelectedDate: _currentDate.subtract(Duration(days: 360)),
      maxSelectedDate: _currentDate.add(Duration(days: 360)),
      prevDaysTextStyle: TextStyle(
        fontSize: 16,
        color: Colors.pinkAccent,
      ),
      inactiveDaysTextStyle: TextStyle(
        color: Colors.tealAccent,
        fontSize: 16,
      ),
      onCalendarChanged: (DateTime date) {
        this.setState(() {
          _targetDateTime = date;
          _currentMonth = DateFormat.yMMM().format(_targetDateTime);
        });
      },
      onDayLongPressed: (DateTime date) {
        print('long pressed date $date');
      },
    );

    return  Scaffold(
        appBar:  AppBar(
          title:  Text(widget.title),
        ),
        body: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              //custom icon
              Container(
                margin: EdgeInsets.symmetric(horizontal: 16.0),
                child: _calendarCarousel,
              ), // This trailing comma makes auto-formatting nicer for build methods.
              //custom icon without header
              Container(
                margin: EdgeInsets.only(
                  top: 30.0,
                  bottom: 16.0,
                  left: 16.0,
                  right: 16.0,
                ),
                child:  Row(
                  children: <Widget>[
                    Expanded(
                        child: Text(
                          _currentMonth,
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 24.0,
                          ),
                        )),
                    FlatButton(
                      child: Text('PREV'),
                      onPressed: () {
                        setState(() {
                          _targetDateTime = DateTime(_targetDateTime.year, _targetDateTime.month -1);
                          _currentMonth = DateFormat.yMMM().format(_targetDateTime);
                        });
                      },
                    ),
                    FlatButton(
                      child: Text('NEXT'),
                      onPressed: () {
                        setState(() {
                          _targetDateTime = DateTime(_targetDateTime.year, _targetDateTime.month +1);
                          _currentMonth = DateFormat.yMMM().format(_targetDateTime);
                        });
                      },
                    )
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.symmetric(horizontal: 16.0),
                child: _calendarCarouselNoHeader,
              ), //
            ],
          ),
        ));
  }
}