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

Flutter 农历日期选择器插件 flutter_lunar_datetime_picker 的使用

1. 插件简介

flutter_lunar_datetime_picker 是一个用于在 Flutter 应用中选择阳历和农历日期的插件。它支持选择日期、时间，并且可以显示农历信息。以下是该插件的阳历和农历显示效果：

阳历显示 阴历显示
阳历显示 阴历显示

2. 引用插件

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_lunar_datetime_picker: ^last_version

3. 使用示例

下面是一个完整的示例代码，展示了如何在 Flutter 应用中使用 flutter_lunar_datetime_picker 插件来选择日期和时间，并切换阳历和农历模式。

import 'package:flutter/material.dart';
import 'package:flutter_lunar_datetime_picker/date_init.dart';
import 'package:flutter_lunar_datetime_picker/flutter_lunar_datetime_picker.dart';
import 'package:intl/intl.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  /// 选中的日期
  String? time = '1995-11-8 12:12';

  /// 是否是农历
  bool lunar = true;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("日期选择器"),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              "日期:$time",
              style: const TextStyle(fontSize: 30),
            ),
            const SizedBox(height: 100),
            ElevatedButton(
              onPressed: () {
                // 显示日期选择器
                DatePicker.showDatePicker(
                  context,
                  lunarPicker: lunar, // 是否显示农历
                  showTime: true, // 是否显示时间选择
                  showLunarYear: true, // 是否显示农历年份
                  dateInitTime: time == null
                      ? DateInitTime(
                          currentTime: DateTime.now(), // 当前时间
                          maxTime: DateTime(2026, 12, 12), // 最大可选时间
                          minTime: DateTime(1995, 2, 4), // 最小可选时间
                        )
                      : DateInitTime(
                          currentTime: DateFormat("yyyy-MM-dd h:m").parse(time ?? ""), // 解析当前选中的时间
                          maxTime: DateTime(2026, 12, 12),
                          minTime: DateTime(1995, 2, 4),
                        ),
                  onConfirm: (time, lunar) { // 确认选择后的回调
                    debugPrint(time.toString());
                    setState(() {
                      this.time = "${time.year}-${time.month}-${time.day} ${time.hour}:${time.minute}";
                      this.lunar = lunar;
                    });
                  },
                  onChanged: (time, lunar) { // 选择变化时的回调
                    debugPrint("change:${time.toString()}");
                  },
                );
              },
              child: const Text("选择"),
            )
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是一个关于如何使用 flutter_lunar_datetime_picker 插件的示例代码。这个插件允许你在 Flutter 应用中选择农历日期和时间。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_lunar_datetime_picker: ^最新版本号 # 请替换为实际最新版本号

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

接下来是一个简单的示例代码，展示了如何使用 flutter_lunar_datetime_picker 来选择农历日期和时间：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Lunar DateTime Picker Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  LunarDateTime? selectedDateTime;

  void _selectDateTime() async {
    final result = await showLunarDateTimePicker(
      context: context,
      initialDateTime: selectedDateTime ?? LunarDateTime.now(),
      firstDate: LunarDateTime(year: 1900, month: 1, day: 1),
      lastDate: LunarDateTime(year: 2100, month: 12, day: 30),
      locale: Locale('zh', 'CN'), // 设置语言为中文简体
    );

    if (result != null && result != selectedDateTime) {
      setState(() {
        selectedDateTime = result;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Lunar DateTime Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              selectedDateTime == null
                  ? '请选择日期和时间'
                  : '${selectedDateTime!.lunarYear}年${selectedDateTime!.lunarMonth}月${selectedDateTime!.lunarDay}日 ${selectedDateTime!.hour}时${selectedDateTime!.minute}分',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _selectDateTime,
              child: Text('选择日期和时间'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 添加依赖：在 pubspec.yaml 文件中添加了 flutter_lunar_datetime_picker 依赖。
  2. 创建主应用：定义了一个简单的 Flutter 应用，包含一个主页面 MyHomePage。
  3. 选择日期和时间：在 MyHomePage 中，定义了一个 _selectDateTime 方法，使用 showLunarDateTimePicker 函数来显示日期和时间选择器。选中的日期和时间会保存到 selectedDateTime 变量中，并在界面上显示。
  4. 显示选中的日期和时间：在界面上显示当前选中的日期和时间，如果没有选中则显示提示信息。

确保你已经正确安装了依赖，并且运行代码前替换了 最新版本号 为实际的最新版本号。这样你就可以在 Flutter 应用中使用农历日期和时间选择器了。

回到顶部