Flutter日期选择器插件picker_date的使用

Flutter日期选择器插件picker_date的使用

如何使用它

PickerDate 是一个用于在 Flutter 应用程序中选择日期的插件。下面是如何使用它的基本步骤。

首先，在你的项目中添加 picker_date 依赖项到 pubspec.yaml 文件中：

dependencies:
  picker_date: ^版本号

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

基本示例

以下是一个简单的示例，展示了如何在 Flutter 应用程序中使用 PickerDate 插件。

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

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

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

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const DemoPage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('日期选择器示例'),
      ),
      body: SizedBox(
          width: MediaQuery.of(context).size.width,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              
              /// 日期选择器
              PickerDate(
                onSubmit: (List<DateTime>? selectedDate) {
                  Navigator.pop(context);
                  if (selectedDate != null) {
                    if (selectedDate.isNotEmpty) {
                      // 在这里处理选中的日期
                      print("Selected Date: ${selectedDate.first}");
                    }
                  }
                },
              ),
            ],
          )),
    );
  }
}

参数说明

代码解释

• onSubmit: 当用户从日期选择器中选择一个或多个日期时，会触发此回调函数。在这个回调函数中，你可以处理所选日期。

完整示例代码

以下是完整的示例代码，包括导入的库和构建的页面结构。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const DemoPage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('日期选择器示例'),
      ),
      body: SizedBox(
          width: MediaQuery.of(context).size.width,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              
              /// 日期选择器
              PickerDate(
                onSubmit: (List<DateTime>? selectedDate) {
                  Navigator.pop(context);
                  if (selectedDate != null) {
                    if (selectedDate.isNotEmpty) {
                      // 在这里处理选中的日期
                      print("Selected Date: ${selectedDate.first}");
                    }
                  }
                },
              ),
            ],
          )),
    );
  }
}