Flutter周日历展示插件flutter_calendar_week的使用

插件简介

Flutter calendar week 是一个用于在Flutter应用中显示周视图日历的UI包。它允许开发者轻松地集成一个交互式的周日历，为用户提供直观的时间选择体验。

展示效果

• iOS

  

• Android

  

使用方法

引入依赖

首先，在项目的pubspec.yaml文件中添加依赖：

dependencies:
  flutter_calendar_week: ^最新版本号

然后执行flutter pub get以下载并安装插件。

示例代码

下面是一个完整的示例代码，展示了如何使用flutter_calendar_week插件创建一个简单的周日历界面，并包含一些基本的交互功能。

import 'package:flutter/material.dart';
import 'package:flutter_calendar_week/flutter_calendar_week.dart';
import 'package:intl/intl.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'CalendarWeek Example',
        home: HomePage(),
      );
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final CalendarWeekController _controller = CalendarWeekController();

  @override
  Widget build(BuildContext context) => Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // 跳转到今天日期
            _controller.jumpToDate(DateTime.now());
            setState(() {});
          },
          child: Icon(Icons.today),
        ),
        appBar: AppBar(
          elevation: 0,
          backgroundColor: Colors.blue,
          title: Text('CalendarWeek'),
        ),
        body: Column(children: [
          Container(
              decoration: BoxDecoration(boxShadow: [
                BoxShadow(
                    color: Colors.black.withOpacity(0.2),
                    blurRadius: 10,
                    spreadRadius: 1)
              ]),
              child: CalendarWeek(
                controller: _controller,
                height: 100,
                showMonth: true,
                minDate: DateTime.now().add(Duration(days: -365)),
                maxDate: DateTime.now().add(Duration(days: 365)),
                onDatePressed: (DateTime datetime) {
                  // 单击日期时触发的动作
                  setState(() {});
                },
                onDateLongPressed: (DateTime datetime) {
                  // 长按日期时触发的动作
                },
                onWeekChanged: () {
                  // 切换周时触发的动作
                },
                monthViewBuilder: (DateTime time) => Align(
                  alignment: FractionalOffset.center,
                  child: Container(
                      margin: const EdgeInsets.symmetric(vertical: 4),
                      child: Text(
                        DateFormat.yMMMM().format(time),
                        overflow: TextOverflow.ellipsis,
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            color: Colors.blue, fontWeight: FontWeight.w600),
                      )),
                ),
                decorations: [
                  DecorationItem(
                      decorationAlignment: FractionalOffset.bottomRight,
                      date: DateTime.now(),
                      decoration: Icon(
                        Icons.today,
                        color: Colors.blue,
                      )),
                  DecorationItem(
                      date: DateTime.now().add(Duration(days: 3)),
                      decoration: Text(
                        'Holiday',
                        style: TextStyle(
                          color: Colors.brown,
                          fontWeight: FontWeight.w600,
                        ),
                      )),
                ],
              )),
          Expanded(
            child: Center(
              child: Text(
                '${_controller.selectedDate.day}/${_controller.selectedDate.month}/${_controller.selectedDate.year}',
                style: TextStyle(fontSize: 30),
              ),
            ),
          )
        ]),
      );
}

关键配置项说明

• controller: 用于控制日历的行为，例如跳转到特定日期。
• height: 设置日历的高度。
• showMonth: 是否显示月份信息。
• minDate 和 maxDate: 设置可选日期范围。
• onDatePressed 和 onDateLongPressed: 定义单击和长按日期时触发的回调函数。
• onWeekChanged: 当用户切换不同的周时触发的回调函数。
• monthViewBuilder: 自定义月份视图的样式。
• decorations: 在特定日期上添加装饰（如图标或文本）。

通过上述配置，您可以根据需要定制属于自己的周日历组件。希望这个插件能帮助您更高效地构建出美观且实用的日历界面！