Flutter日历展示插件mini_calendar的使用

Flutter日历展示插件mini_calendar的使用

mini_calendar

Date component developed with Flutter, plans to support display, swipe left and right, add date mark, radio, display week, etc.

使用Flutter开发的日期组件，计划支持显示，左右滑动，添加日期标记，单选，显示星期等功能。

• 更新记录

主要想实现的内容

使用

引入库

dependencies:
  mini_calendar: ^2.0.0

导包

import 'package:mini_calendar/mini_calendar.dart';

月视图(MonthWidget)

MonthWidget(); // 默认当月

• 可通过控制器参数来控制显示的月份以及选择的日期

MonthWidget(
  controller: MonthController.init(
      MonthOption<String>(
        currentDay: DateDay.now().copyWith(month: index + 1, day: Random().nextInt(27) + 1),
        currentMonth: DateMonth.now().copyWith(month: index + 1),
      )
  ),
)

• 支持显示连选

MonthWidget(
  controller: MonthController.init(MonthOption(
    currentMonth: DateMonth.now().copyWith(month: 1),
    enableContinuous: true,
    firstSelectDay: DateDay.now().copyWith(month: 1, day: 8),
    secondSelectDay: DateDay.now().copyWith(month: 1, day: 18),
  )),
)

• 支持多选

MonthWidget(
  controller: MonthController.init(MonthOption(
    currentMonth: DateMonth.now().copyWith(month: 1),
    enableMultiple: true,
    multipleDays: [
            DateDay.now().copyWith(month: 1, day: 3),
            DateDay.now().copyWith(month: 1, day: 5),
            DateDay.now().copyWith(month: 1, day: 8),
          ],
  )),
)

• 支持添加标记

• ……

滚动日历(MonthPageView)

控制器需要创建后获取 onCreated

MonthPageView<T>(
  padding: EdgeInsets.all(1),
  scrollDirection: Axis.horizontal, // 水平滑动或者竖直滑动
  option: MonthOption<T>(
    enableContinuous: true, // 单选、连选控制
    marks: { 
      DateDay.now().copyWith(day: 1): '111',
      DateDay.now().copyWith(day: 5): '222',
      DateDay.now().copyWith(day: 13): '333',
      DateDay.now().copyWith(day: 19): '444',
      DateDay.now().copyWith(day: 26): '444',
    },
  ),
  showWeekHead: true, // 显示星期头部
  onContinuousSelectListen: (DateDay？firstDay,DateDay？endFay) {
  }, // 连选回调
  onMultipleSelectListen: (list) {
  }, // 多选回调
  onMonthChange: (month) {
  }, // 月份更改回调
  onDaySelected: (DateDay day, T? markData, bool enable) {
    // enable : 是否是可选日期
  }, // 日期选中回调
  onCreated: (controller){
  }, // 控制器回调
  onClear: () {
  }, // 点击清空按钮，设置为空时不显示清空按钮
),

控制器

参数初始化

MonthOption({
    DateDay currentDay, // 选择的日期
    DateMonth currentMonth, // 当前月份
    int firstWeek = 7, // 第一列显示的星期 [1,7]
    DateDay firstSelectDay, // 连选第一个日期
    DateDay secondSelectDay, // 连选第二个日期
    bool enableContinuous = false, // 是否支持连选
    Map<DateDay, T> marks = const {}, // 标记
    List<DateDay>? multipleDays, // 多选日期
    List<DateDay>? enableDays, // 能选择的日期集合
    bool enableMultiple = false, // 是否支持多选
    DateDay minDay, // 可选的最小日期
    DateDay maxDay, // 可选的最大日期
  });

注销

MonthPageController#dispose();

更新

MonthPageController#reLoad();

下一月

MonthPageController#next();

上一月

MonthPageController#last();

跳转到指定月份

MonthPageController#goto(DateMonth month);

高级功能

自定义

自定义月视图背景

buildMonthBackground: (_, width, height, month) => Image.network(
    'https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/b0c57bd90abd49d59920924010ab66a9.png!sswm',
    height: height,
    width: width,
    fit: BoxFit.cover,
    ),

自定义月视图头部

buildMonthHead: (ctx, width, height, month) => Container(
padding: EdgeInsets.all(5),
child: Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    Text(
      "${month.year}年",
      style: TextStyle(fontSize: 40, color: Colors.white),
    ),
    Container(
      margin: EdgeInsets.only(left: 5, right: 5),
      width: 1,
      color: Colors.yellow,
      height: 50,
    ),
    Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          "${month.month}月",
          style: TextStyle(fontSize: 18, color: Colors.orange),
        ),
        Text("这是一个自定义的月头部"),
      ],
    )
  ],
),
),

• 自定义星期头部
• 自定义日视图
• …

更多功能clone项目，运行demo

开源不易，老铁们多多支持，点赞也是支持 😃 ！

示例代码

import 'package:example/calendar_customize.dart';
import 'package:example/calendar_view.dart';
import 'package:example/month_page_view_demo.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _buildButton('年历', CalendarViewPage()),
            _buildButton('翻页日历', MonthPageViewDemo()),
            _buildButton('自定义', CalendarCustomizePage())
          ],
        ),
      ),
    );
  }

  Widget _buildButton(String label, Widget page) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ElevatedButton(
        onPressed: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (ctx) => page)),
        child: Text(label),
      ),
    );
  }
}