Flutter日历轮播插件 flutter_calendar_carousel 的使用

flutter_calendar_carousel 是一个支持水平滑动的日历小部件，高度可定制化，并且可以为每个事件添加自定义图标。以下是该插件的详细使用方法和示例代码。

安装

在 pubspec.yaml 文件中添加 flutter_calendar_carousel 作为依赖项：

dependencies:
  flutter_calendar_carousel: ^2.4.0

然后运行以下命令来获取依赖包：

flutter pub get

示例 Demo

下面是一个完整的示例代码，展示了如何使用 flutter_calendar_carousel 插件。

主文件 main.dart

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: 'Flutter Calendar Carousel Example',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'Flutter Calendar Carousel Example'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  DateTime _currentDate = DateTime(2019, 2, 3);
  DateTime _currentDate2 = DateTime(2019, 2, 3);
  String _currentMonth = DateFormat.yMMM().format(DateTime(2019, 2, 3));
  DateTime _targetDateTime = DateTime(2019, 2, 3);

  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(events: {
    DateTime(2019, 2, 10): [
      Event(date: DateTime(2019, 2, 10), title: 'Event 1', icon: _eventIcon, dot: Container(margin: EdgeInsets.symmetric(horizontal: 1.0), color: Colors.red, height: 5.0, width: 5.0)),
      Event(date: DateTime(2019, 2, 10), title: 'Event 2', icon: _eventIcon),
      Event(date: DateTime(2019, 2, 10), title: 'Event 3', icon: _eventIcon),
    ],
  });

  @override
  void initState() {
    _markedDateMap.add(DateTime(2019, 2, 25), Event(date: DateTime(2019, 2, 25), title: 'Event 5', icon: _eventIcon));
    _markedDateMap.add(DateTime(2019, 2, 10), Event(date: DateTime(2019, 2, 10), title: 'Event 4', icon: _eventIcon));
    _markedDateMap.addAll(DateTime(2019, 2, 11), [
      Event(date: DateTime(2019, 2, 11), title: 'Event 1', icon: _eventIcon),
      Event(date: DateTime(2019, 2, 11), title: 'Event 2', icon: _eventIcon),
      Event(date: DateTime(2019, 2, 11), title: 'Event 3', icon: _eventIcon),
    ]);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final _calendarCarousel = CalendarCarousel<Event>(
      onDayPressed: (date, events) {
        setState(() => _currentDate = date);
        events.forEach((event) => print(event.title));
      },
      weekendTextStyle: TextStyle(color: Colors.red),
      thisMonthDayBorderColor: Colors.grey,
      headerText: 'Custom Header',
      weekFormat: true,
      markedDatesMap: _markedDateMap,
      height: 200.0,
      selectedDateTime: _currentDate2,
      showIconBehindDayText: true,
      customGridViewPhysics: NeverScrollableScrollPhysics(),
      markedDateShowIcon: true,
      markedDateIconMaxShown: 2,
      selectedDayTextStyle: TextStyle(color: Colors.yellow),
      todayTextStyle: TextStyle(color: Colors.blue),
      markedDateIconBuilder: (event) => event.icon ?? Icon(Icons.help_outline),
      minSelectedDate: _currentDate.subtract(Duration(days: 360)),
      maxSelectedDate: _currentDate.add(Duration(days: 360)),
      todayButtonColor: Colors.transparent,
      todayBorderColor: Colors.green,
      markedDateMoreShowTotal: true,
    );

    final _calendarCarouselNoHeader = CalendarCarousel<Event>(
      todayBorderColor: Colors.green,
      onDayPressed: (date, events) {
        setState(() => _currentDate2 = date);
        events.forEach((event) => print(event.title));
      },
      daysHaveCircularBorder: true,
      showOnlyCurrentMonthDate: false,
      weekendTextStyle: TextStyle(color: Colors.red),
      thisMonthDayBorderColor: Colors.grey,
      weekFormat: false,
      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,
      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) {
        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>[
            Container(
              margin: EdgeInsets.symmetric(horizontal: 16.0),
              child: _calendarCarousel,
            ),
            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))),
                  TextButton(child: Text('PREV'), onPressed: () {
                    setState(() {
                      _targetDateTime = DateTime(_targetDateTime.year, _targetDateTime.month - 1);
                      _currentMonth = DateFormat.yMMM().format(_targetDateTime);
                    });
                  }),
                  TextButton(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,
            ),
          ],
        ),
      ),
    );
  }
}

关键属性说明

• onDayPressed: 当用户点击某一天时触发的回调函数。
• weekendTextStyle: 设置周末日期的文本样式。
• thisMonthDayBorderColor: 当前月份日期的边框颜色。
• headerText: 日历头部显示的文本。
• weekFormat: 是否以周视图显示日历。
• markedDatesMap: 标记特定日期的事件列表。
• height: 日历的高度。
• selectedDateTime: 当前选中的日期。
• showIconBehindDayText: 是否在日期文本后面显示图标。
• customGridViewPhysics: 自定义滚动物理属性。
• markedDateShowIcon: 是否显示标记日期的图标。
• minSelectedDate 和 maxSelectedDate: 允许选择的最小和最大日期范围。

通过上述示例代码，你可以快速上手并开始使用 flutter_calendar_carousel 插件来构建自己的日历应用。如果你需要进一步的功能扩展或自定义设置，请参考官方文档中的更多属性配置。