Flutter日期选择插件calendar_picker的使用

Flutter日期选择插件calendar_picker的使用

CalenderPicker

CalenderPicker 是一个Flutter库，它提供了一个水平时间线的日历，并且支持单选和多选选项。

App Demo

以下是该插件的一些演示截图：

让我们开始吧

如何使用

在你的Dart文件中导入以下包：

import 'package:calender_picker/calender_picker.dart';

使用方法

这个版本可能会破坏向后兼容性。

使用 CalenderPicker 小部件：

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      CalenderPicker(
        DateTime.now(), // 当前日期
        initialSelectedDate: DateTime.now(), // 初始选定日期
        selectionColor: Colors.black, // 选定日期的颜色
        selectedTextColor: Colors.white, // 选定日期文本颜色
        onDateChange: (date) {
          // 新日期被选中
          setState(() {
            _selectedValue = date; // 更新选定值
          });
        },
      ),
    ],
)

构造函数：

CalenderPicker(
    this.startDate, {
    Key? key,
    this.enableMultiSelection = false, // 是否启用多选
    this.monthTextStyle = defaultMonthTextStyle, // 月份文本样式
    this.dayTextStyle = defaultDayTextStyle, // 天数文本样式
    this.dateTextStyle = defaultDateTextStyle, // 日期文本样式
    this.selectedTextColor = Colors.white, // 选定日期文本颜色
    this.selectionColor = AppColors.defaultSelectionColor, // 选定日期颜色
    this.initialSelectedDate, // 初始选定日期
    this.activeDates, // 活动日期
    this.daysCount = 500, // 可选天数
    this.onDateChange, // 日期变化回调
    this.locale = "en_US", // 语言环境
}) : super(key: key);

完整示例代码

import 'package:calender_picker/date_picker_widget.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get_navigation/src/root/get_material_app.dart';
import 'package:syncfusion_flutter_datepicker/datepicker.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Horizontal Calendar Demo',
      home: MyHomePage(title: 'Calendar Single Selection'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  DateTime dateTime = DateTime.now();

  int days = 10;
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(widget.title),
        backgroundColor: const Color(0XFF0342E9), // 标题栏背景色
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(10),
              child: Row(
                children: [
                  const Expanded(
                      child: Text(
                    'Scheduled Workout', // 预定锻炼
                    style: TextStyle(
                        color: Colors.black87,
                        fontSize: 20,
                        fontWeight: FontWeight.bold),
                  )),
                  InkWell(
                    onTap: () => Get.bottomSheet(
                        SfDateRangePicker(
                          selectionMode: DateRangePickerSelectionMode.range,
                          view: DateRangePickerView.month,
                          onSelectionChanged: _onSelectionChanged,
                        ),
                        backgroundColor: Colors.white),
                    child: Container(
                        decoration: BoxDecoration(
                            color: const Color(0XFFEDF3FF),
                            borderRadius: BorderRadius.circular(10)),
                        child: const Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Icon(
                            Icons.calendar_today,
                            color: Color(0XFF0342E9), // 日历图标颜色
                          ),
                        )),
                  )
                ],
              ),
            ),
            CalenderPicker(
              dateTime, // 当前日期
              daysCount: days, // 可选天数
              enableMultiSelection: true, // 启用多选
              multiSelectionListener: (value) => print(value), // 多选监听器
              selectionColor: const Color(0XFF0342E9), // 选定日期颜色
              selectedTextColor: Colors.white, // 选定日期文本颜色
            ),
          ],
        ),
      ),
    );
  }

  different({DateTime? first, DateTime? last}) async {
    int data = last!.difference(first!).inDays; // 计算两个日期之间的天数差
    setState(() {
      data++;
      days = data; // 更新可选天数
      print(data); // 打印天数差
    });
  }

  void _onSelectionChanged(DateRangePickerSelectionChangedArgs args) {
    if (args.value is PickerDateRange) {
      setState(() {
        dateTime = args.value.startDate; // 更新选定的起始日期

        if (args.value.endDate != null) {
          different(first: args.value.startDate, last: args.value.endDate); // 计算并更新天数差
          print(args.value.startDate); // 打印起始日期
          print(args.value.endDate); // 打印结束日期
        }
      });
    }
  }
}