Flutter网页日期选择器插件vph_web_date_picker的使用

简介

vph_web_date_picker 是一个适用于Flutter Web应用的日期选择器插件。它提供了一个简单易用的API来在Web应用中显示日期选择器。

使用方法

添加依赖

首先，在pubspec.yaml文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  vph_web_date_picker: ^latest_version

然后运行flutter pub get命令来安装依赖。

示例代码

以下是一个完整的示例，展示了如何使用vph_web_date_picker插件：

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:vph_web_date_picker/vph_web_date_picker.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late TextEditingController _controller;
  late DateTimeRange _selectedDateRange;
  Locale? _locale;
  bool _asDialog = false;
  bool _enableDateRangeSelection = false;

  static const _supportedLocales = [
    Locale('en', 'US'),
    Locale('vi', 'VN'),
    Locale('es', 'ES'),
    Locale('it', 'IT'),
    Locale('ar', 'DZ'),
  ];

  @override
  void initState() {
    super.initState();
    _selectedDateRange =
        DateTimeRange(start: DateTime(2024, 12, 10), end: DateTime.now());
    _controller = TextEditingController(
        text: _enableDateRangeSelection
            ? "From ${_selectedDateRange.start.toString().split(' ')[0]} to ${_selectedDateRange.end.toString().split(' ')[0]}"
            : _selectedDateRange.start.toString().split(' ')[0]);
    _locale = _supportedLocales[0];
  }

  @override
  Widget build(BuildContext context) {
    final textFieldKey = GlobalKey();
    return MaterialApp(
      supportedLocales: _supportedLocales,
      localizationsDelegates: GlobalMaterialLocalizations.delegates,
      locale: _locale,
      title: 'Web Date Picker Demo',
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(32),
          child: SizedBox(
            width: 240,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                DropdownButton<Locale>(
                  isExpanded: true,
                  value: _locale,
                  items: _supportedLocales
                      .map(
                        (e) => DropdownMenuItem<Locale>(
                          value: e,
                          child: Text(e.toString()),
                        ),
                      )
                      .toList(),
                  onChanged: (e) {
                    setState(() {
                      _locale = e;
                    });
                  },
                ),
                Row(
                  children: [
                    Checkbox(
                      value: _asDialog,
                      onChanged: (v) => setState(() {
                        _asDialog = v!;
                      }),
                    ),
                    const Text("asDialog"),
                  ],
                ),
                Row(
                  children: [
                    Checkbox(
                      value: _enableDateRangeSelection,
                      onChanged: (v) => setState(() {
                        _enableDateRangeSelection = v!;
                      }),
                    ),
                    const Text("enableDateRangeSelection"),
                  ],
                ),
                TextField(
                  key: textFieldKey,
                  controller: _controller,
                  readOnly: true,
                  onTap: () async {
                    final pickedDateRange = await showWebDatePicker(
                      context: textFieldKey.currentContext!,
                      initialDate: _selectedDateRange.start,
                      initialDate2: _selectedDateRange.end,
                      firstDate: DateTime.now().subtract(const Duration(days: 7)),
                      lastDate: DateTime.now().add(const Duration(days: 14000)),
                      width: 400,
                      weekendDaysColor: Colors.red,
                      selectedDayColor: Colors.brown,
                      asDialog: _asDialog,
                      enableDateRangeSelection: _enableDateRangeSelection,
                    );
                    if (pickedDateRange != null) {
                      _selectedDateRange = pickedDateRange;
                      if (_enableDateRangeSelection) {
                        _controller.text =
                            "From ${_selectedDateRange.start.toString().split(' ')[0]} to ${_selectedDateRange.end.toString().split(' ')[0]}";
                      } else {
                        _controller.text =
                            _selectedDateRange.start.toString().split(' ')[0];
                      }
                    }
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

参数说明

• context: 当前上下文。
• initialDate: 初始选中的日期。
• initialDate2: 如果启用了日期范围选择，则为初始选中的结束日期。
• firstDate: 可选择的最早日期。
• lastDate: 可选择的最晚日期。
• width: 日期选择器对话框的宽度。
• withoutActionButtons: 是否隐藏操作按钮（重置和今天）。
• weekendDaysColor: 周末日期的颜色。
• selectedDayColor: 已选日期的颜色。
• asDialog: 是否以对话框形式显示日期选择器。
• enableDateRangeSelection: 是否启用日期范围选择。

通过上述示例代码和参数说明，您可以轻松地在Flutter Web应用中集成并使用vph_web_date_picker插件。