Flutter 日曆元件簡單實現

2022-08-05 14:03:08

前言

近期有個業務需求，涉及使用者付費相關的計算，需要一個日曆元件，元件功能如下：

僅支援從明天開始選擇預定日期
僅支援可選範圍內的日期
日期的選擇是連續的
有個推薦日期，需要聯動更新
todo:
- 支援不連續的日期選擇

安裝

dependencies:
  tw_calendar: latest_version

效果

demo 演示

業務使用 headerView

使用

設定屬性

 /// 開始的年月份
  final DateTime firstDate;
  /// 結束的年月份
  final DateTime lastDate;
  /// 選擇開始日期
  final DateTime? selectedStartDate;
  /// 選擇結束日期
  final DateTime? selectedEndDate;
  /// 點選方法回撥
  final Function? onSelectFinish;
  /// 頭部元件
  final Widget? headerView;
  /// 選擇模式
  final TWCalendarListSeletedMode? seletedMode;
  /// 月檢視高度，為空則佔滿剩餘空間
  final double? monthBodyHeight;
  /// 周檢視高度， 預設 48
  final double? weekDayHeight;
  /// 水平間隙
  final double? horizontalSpace;
  /// 確認周檢視高度， 預設 66
  final double? ensureViewHeight;
  /// 確認按鈕的間隙
  final EdgeInsetsGeometry? ensureViewPadding;
  /// 確認按鈕選中顏色
  final Color? ensureViewSelectedColor;
  /// 確認未按鈕選中顏色
  final Color? ensureViewUnSelectedColor;
  /// 今天的日期的背景顏色
  final Color? dayNumberTodayColor;
  /// 選中日期背景顏色
  final Color? dayNumberSelectedColor;
  /// 確認按鈕字型大小
  final double? ensureTitleFontSize;
  /// 點選回撥
  final void Function(DateTime seletedDate, int seletedDays)? onSelectDayRang;
  /// 選擇確認按鈕 title 回撥
  final String Function(
          DateTime? selectStartTime, DateTime? selectEndTime, int seletedDays)?
      onSelectDayTitle;

DEMO

TWCalendarList(
      firstDate: TWCalendarTool.tomorrow,
      lastDate: DateTime(2022, 11, 21),
      selectedStartDate: DateTime(2022, 9, 2),
      selectedEndDate: DateTime(2022, 9, 10),
      monthBodyHeight: 300.w,
      seletedMode: TWCalendarListSeletedMode.singleSerial,
      headerView: Container(
        alignment: Alignment.center,
        height: 55.w,
        child: Text(
          '日曆元件',
          style: TextStyle(
            color: TWColors.tw333333,
            fontSize: 18.w,
          ),
        ),
      ),
      onSelectDayRang: ((seletedDate, seletedDays) {
        print('seletedDate : $seletedDate, seletedDays : $seletedDays');
      }),
      onSelectFinish: (selectStartTime, selectEndTime) {
        print(
            'selectStartTime : $selectStartTime, selectEndTime : $selectEndTime');
        Navigator.pop(context);
      },
    )