Flutter日期时间选择器插件datetime_picker_field_platform的使用

Flutter日期时间选择器插件datetime_picker_field_platform的使用

datetime_picker_field_platform 是一个Flutter插件，允许您在应用程序中显示带有文本输入框功能的日期和时间选择器。该插件支持Android和iOS平台。

安装

要使用 datetime_picker_field_platform 插件，首先需要在 pubspec.yaml 文件中添加依赖项：

dependencies:
  datetime_picker_field_platform: ^0.0.1

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 datetime_picker_field_platform 插件来创建日期和时间选择器，并进行表单验证。

import 'package:flutter/material.dart';
import 'package:datetime_picker_field_platform/datetime_picker_field_platform.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 MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  // 创建一个全局的FormState键，用于表单验证
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Form(
        key: _formKey, // 将FormState键绑定到表单
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 日期选择器
              DateTimeFieldPlatform(
                mode: DateMode.date, // 设置为日期模式
                decoration: const InputDecoration(
                  hintText: '选择日期', // 提示文本
                ),
                maximumDate: DateTime.now().add(const Duration(days: 720)), // 最大可选日期（当前日期后的两年）
                minimumDate: DateTime.utc(2009), // 最小可选日期（2009年）
                validator: (String? value) { // 表单验证
                  if (value!.isEmpty) {
                    return '此字段是必填项'; // 如果为空，返回错误信息
                  }
                  return null; // 验证通过
                },
              ),
              const SizedBox(height: 40), // 添加间距
              
              // 时间选择器
              DateTimeFieldPlatform(
                mode: DateMode.time, // 设置为时间模式
                decoration: const InputDecoration(
                  hintText: '选择时间', // 提示文本
                ),
                maximumDate: DateTime.now().add(const Duration(hours: 2)), // 最大可选时间为当前时间后两小时
                minimumDate: DateTime.now().subtract(const Duration(hours: 2)), // 最小可选时间为当前时间前两小时
              ),
              const SizedBox(height: 40), // 添加间距
              
              // 提交按钮
              ElevatedButton(
                onPressed: _validateFields, // 点击时调用验证方法
                child: const Text('验证'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 表单验证方法
  void _validateFields() {
    if (_formKey.currentState!.validate()) {
      // 如果验证通过，可以执行其他操作
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('验证成功')),
      );
    }
  }
}