Flutter日历选择插件calendar_picker的使用

Flutter日历选择插件calendar_picker的使用

该插件可以展示一个Material日期选择器，并提供了额外的功能，例如排除特定日期。

使用

日历选择插件示例

MaterialButton(
  color: Colors.blue,
  onPressed: () {
    // 显示自定义日历选择器
    showCustomCalendarPicker(
      context: context, // 当前上下文
      initialDate: DateTime.now(), // 初始日期
      firstDate: DateTime.now(), // 最早可选日期
      lastDate: DateTime.now().add(const Duration(days: 30)), // 最晚可选日期
      excluded: [ // 排除的日期列表
        DateTime.now().add(const Duration(days: 2)), // 排除两天后的日期
        DateTime.now().add(const Duration(days: 5)), // 排除五天后的日期
        DateTime.now().subtract(const Duration(days: 5)), // 排除五天前的日期
      ],
      onSelected: (date) { // 选择日期后的回调函数
        print("date $date"); // 打印所选日期
      },
    );
  },
  child: const Text("calendar picker", style: TextStyle(color: Colors.white),),
)

示例代码

以下是一个完整的示例代码：

import 'package:calendar_picker/calendar_picker.dart';
import 'package:flutter/material.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 MaterialApp(
      home: HomeView(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: MaterialButton(
            color: Colors.blue,
            onPressed: () {
              // 显示自定义日历选择器
              showCustomCalendarPicker(
                context: context, // 当前上下文
                initialDate: DateTime.now(), // 初始日期
                firstDate: DateTime.now(), // 最早可选日期
                lastDate: DateTime.now().add(const Duration(days: 30)), // 最晚可选日期
                excluded: [ // 排除的日期列表
                  DateTime.now().add(const Duration(days: 2)), // 排除两天后的日期
                  DateTime.now().add(const Duration(days: 5)), // 排除五天后的日期
                  DateTime.now().subtract(const Duration(days: 5)), // 排除五天前的日期
                ],
                onSelected: (date) { // 选择日期后的回调函数
                  print("date $date"); // 打印所选日期
                },
              );
            },
            child: const Text(
              "calendar picker",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


calendar_picker 是一个 Flutter 插件，用于在应用程序中显示一个日历选择器，允许用户选择日期。以下是如何在 Flutter 项目中使用 calendar_picker 插件的步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  calendar_picker: ^1.0.0+4

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 calendar_picker 包：

import 'package:calendar_picker/calendar_picker.dart';

3. 使用 CalendarPicker

你可以使用 CalendarPicker 小部件来显示一个日历选择器。以下是一个简单的示例：

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

class CalendarPickerExample extends StatefulWidget {
  [@override](/user/override)
  _CalendarPickerExampleState createState() => _CalendarPickerExampleState();
}

class _CalendarPickerExampleState extends State<CalendarPickerExample> {
  DateTime _selectedDate = DateTime.now();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Calendar Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Date: ${_selectedDate.toLocal()}',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                _showCalendarPicker(context);
              },
              child: Text('Select Date'),
            ),
          ],
        ),
      ),
    );
  }

  void _showCalendarPicker(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          content: CalendarPicker(
            initialDate: _selectedDate,
            firstDate: DateTime(2000),
            lastDate: DateTime(2100),
            onDateChanged: (DateTime date) {
              setState(() {
                _selectedDate = date;
              });
              Navigator.of(context).pop();
            },
          ),
        );
      },
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: CalendarPickerExample(),
  ));
}
回到顶部