Flutter日历轮播插件flutter_calendar_carousel_new的使用

插件简介

flutter_calendar_carousel_new 是一个支持水平滑动的日历小部件，适用于 Flutter。该插件允许你高度自定义日历的外观和功能。例如，你可以为每个事件添加自定义图标。

特性

支持水平滑动。
可高度定制化。
可以为每个事件添加自定义图标。

使用兼容性

该插件与 Flutter v3 兼容，版本要求为 2.4.+。

新特性

[2.0.3]
- 支持多天选择（通过 addRange 方法实现）。
- 引入了 customDayBuilder 功能，由 maxgmer 完成。

示例样式：

矩形风格

圆形风格

无边框

标记日期

自定义图标事件

开始使用

安装插件

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_calendar_carousel_new: ^2.0.3

然后运行 flutter pub get。

示例代码

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

import 'package:flutter/material.dart';

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

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

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

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

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => new _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));

  // 自定义事件图标
  static Widget _eventIcon = new Container(
    decoration: new BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(1000)),
        border: Border.all(color: Colors.blue, width: 2.0)),
    child: new Icon(
      Icons.person,
      color: Colors.amber,
    ),
  );

  // 自定义事件列表
  EventList<Event> _markedDateMap = new EventList<Event>(
    events: {
      new DateTime(2019, 2, 10): [
        new Event(
          date: new 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,
          ),
        ),
        new Event(
          date: new DateTime(2019, 2, 10),
          title: 'Event 2',
          icon: _eventIcon,
        ),
        new Event(
          date: new DateTime(2019, 2, 10),
          title: 'Event 3',
          icon: _eventIcon,
        ),
      ],
    },
  );

  [@override](/user/override)
  void initState() {
    // 初始化时添加更多事件
    _markedDateMap.add(
        new DateTime(2019, 2, 25),
        new Event(
          date: new DateTime(2019, 2, 25),
          title: 'Event 5',
          icon: _eventIcon,
        ));

    _markedDateMap.add(
        new DateTime(2019, 2, 10),
        new Event(
          date: new DateTime(2019, 2, 10),
          title: 'Event 4',
          icon: _eventIcon,
        ));

    _markedDateMap.addAll(new DateTime(2019, 2, 11), [
      new Event(
        date: new DateTime(2019, 2, 11),
        title: 'Event 1',
        icon: _eventIcon,
      ),
      new Event(
        date: new DateTime(2019, 2, 11),
        title: 'Event 2',
        icon: _eventIcon,
      ),
      new Event(
        date: new DateTime(2019, 2, 11),
        title: 'Event 3',
        icon: _eventIcon,
      ),
    ]);
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 带自定义图标的日历
    final _calendarCarousel = CalendarCarousel<Event>(
      onDayPressed: (date, events) {
        this.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) {
        return 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) {
        this.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) {
        this.setState(() {
          _targetDateTime = date;
          _currentMonth = DateFormat.yMMM().format(_targetDateTime);
        });
      },
      onDayLongPressed: (DateTime date) {
        print('long pressed date $date');
      },
    );

    return new Scaffold(
      appBar: new AppBar(
        title: new 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: new 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,
            ),
          ],
        ),
      ),
    );
  }
}

caililin 1楼•10 天前

更多关于Flutter日历轮播插件flutter_calendar_carousel_new的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

flutter_calendar_carousel_new 是一个用于在 Flutter 应用中实现日历轮播效果的插件。它允许用户通过左右滑动来浏览不同的月份，并且可以自定义日历的外观和行为。

安装

首先，你需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_calendar_carousel_new: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

基本使用

以下是一个简单的示例，展示如何使用 flutter_calendar_carousel_new 插件：

import 'package:flutter/material.dart';
import 'package:flutter_calendar_carousel_new/flutter_calendar_carousel_new.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CalendarCarouselExample(),
    );
  }
}

class CalendarCarouselExample extends StatefulWidget {
  @override
  _CalendarCarouselExampleState createState() => _CalendarCarouselExampleState();
}

class _CalendarCarouselExampleState extends State<CalendarCarouselExample> {
  DateTime _currentDate = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Calendar Carousel Example'),
      ),
      body: Center(
        child: CalendarCarousel(
          onDayPressed: (DateTime date, List events) {
            setState(() {
              _currentDate = date;
            });
          },
          weekendTextStyle: TextStyle(
            color: Colors.red,
          ),
          thisMonthDayBorderColor: Colors.grey,
          weekFormat: false,
          height: 420.0,
          selectedDateTime: _currentDate,
          daysHaveCircularBorder: true,
        ),
      ),
    );
  }
}

参数说明

onDayPressed: 当用户点击某一天时触发的回调函数。
weekendTextStyle: 自定义周末日期的文本样式。
thisMonthDayBorderColor: 当前月份日期的边框颜色。
weekFormat: 是否以周为单位显示日历。
height: 日历的高度。
selectedDateTime: 当前选中的日期。
daysHaveCircularBorder: 日期是否显示为圆形边框。

自定义

你可以通过修改 CalendarCarousel 的参数来自定义日历的外观和行为。例如，你可以更改日期的颜色、字体、边框样式等。

事件处理

你还可以为日历添加事件。例如，你可以在某些日期上显示标记，或者在用户点击某一天时执行特定的操作。

CalendarCarousel(
  onDayPressed: (DateTime date, List events) {
    setState(() {
      _currentDate = date;
    });
    // 处理点击事件
  },
  markedDatesMap: {
    DateTime(2023, 10, 5): [
      Event(
        date: DateTime(2023, 10, 5),
        title: 'Event 1',
        icon: Icon(Icons.event, color: Colors.blue),
      ),
    ],
  },
  // 其他参数...
)