Flutter垂直日期选择器插件vertical_date_picker的使用

Flutter垂直日期选择器插件vertical_date_picker的使用

vertical_date_picker 是一个简单且易于使用的垂直日历包，具有许多功能。

示例代码

以下是使用 vertical_date_picker 的完整示例代码：

import 'package:flutter/material.dart';
import 'package:vertical_date_picker/widgets/vertical_calendar_view.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: '垂直日历'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: VerticalCalendar(
          firstDate: DateTime.now(), // 设置最早可以选择的日期
          lastDate: DateTime.now().add(const Duration(days: 365)), // 设置最晚可以选择的日期
          onStartDateChanged: (DateTime value) { // 开始日期改变时的回调函数
            print('开始日期改变为 $value');
          },
          onEndDateChanged: (DateTime? value) { // 结束日期改变时的回调函数
            if (value != null) {
              print('结束日期改变为 $value');
            } else {
              print('结束日期已取消');
            }
          },
          currentDate: DateTime.now(), // 当前显示的日期
        ),
      ), // 这个逗号使自动格式化更好看
    );
  }
}

使用说明

1. 导入包： 在你的项目中添加 vertical_date_picker 依赖，并在文件顶部导入。

   import 'package:vertical_date_picker/widgets/vertical_calendar_view.dart';
   

2. 初始化应用： 创建一个 MaterialApp 并设置主页。

   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
           useMaterial3: true,
         ),
         home: const MyHomePage(title: '垂直日历'),
       );
     }
   }
   

3. 创建主页面： 创建一个状态管理类 MyHomePage 和 _MyHomePageState。

   class MyHomePage extends StatefulWidget {
     const MyHomePage({super.key, required this.title});
   
     final String title;
   
     @override
     State<MyHomePage> createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           backgroundColor: Theme.of(context).colorScheme.inversePrimary,
           title: Text(widget.title),
         ),
         body: Center(
           child: VerticalCalendar(
             firstDate: DateTime.now(),
             lastDate: DateTime.now().add(const Duration(days: 365)),
             onStartDateChanged: (DateTime value) {},
             onEndDateChanged: (DateTime? value) {},
             currentDate: DateTime.now(),
           ),
         ),
       );
     }
   }
   

4. 配置垂直日历： 在 body 中添加 VerticalCalendar 小部件，并配置其属性如 firstDate, lastDate, onStartDateChanged, onEndDateChanged 和 currentDate。

   class _MyHomePageState extends State<MyHomePage> {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           backgroundColor: Theme.of(context).colorScheme.inversePrimary,
           title: Text(widget.title),
         ),
         body: Center(
           child: VerticalCalendar(
             firstDate: DateTime.now(), // 设置最早可以选择的日期
             lastDate: DateTime.now().add(const Duration(days: 365)), // 设置最晚可以选择的日期
             onStartDateChanged: (DateTime value) { // 开始日期改变时的回调函数
               print('开始日期改变为 $value');
             },
             onEndDateChanged: (DateTime? value) { // 结束日期改变时的回调函数
               if (value != null) {
                 print('结束日期改变为 $value');
               } else {
                 print('结束日期已取消');
               }
             },
             currentDate: DateTime.now(), // 当前显示的日期
           ),
         ),
       );
     }
   }