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

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

概述

gd_datetime_picker 是一个受 flutter-cupertino-date-picker 启发的 Flutter 日期时间选择器插件。它可以让你在多种语言中选择日期、时间或日期与时间：

• 阿尔巴尼亚语(sq)
• 阿拉伯语(ar)
• 亚美尼亚语(hy)
• 阿塞拜疆语(az)
• 巴斯克语(eu)
• 孟加拉语(bn)
• 保加利亚语(bg)
• 加泰罗尼亚语(cat)
• 中文(zh)
• 丹麦语(da)
• 荷兰语(nl)
• 英语(en)
• 法语(fr)
• 德语(de)
• 希伯来语(he)
• 印度尼西亚语(id)
• 意大利语(it)
• 日语(jp)
• 哈萨克语(kk)
• 韩语(ko)
• 波斯语(fa)
• 波兰语(pl)
• 葡萄牙语(pt)
• 俄语(ru)
• 西班牙语(es)
• 瑞典语(sv)
• 泰语(th)
• 土耳其语(tr)
• 越南语(vi)
• 高棉语(kh)

你还可以自定义选择器的内容。

示例代码

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

import 'package:flutter/material.dart';
import 'package:gd_datetime_picker/gd_datetime_picker.dart';
import 'package:gd_datetime_picker/i18n_model.dart';

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

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

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

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(body: MyHomePage()),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  String dateTime = '';

  @override
  void initState() {
    // 初始化时设置当前日期
    super.initState();
    DateTime now = DateTime.now();
    dateTime = '${now.year}-${now.month}-${now.day}';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('插件示例应用'),
      ),
      body: Center(
        child: Text('时间是: $dateTime'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 使用Builder来确保context是Navigator的后代
          DatePicker.showDatePicker(context,
              showTitleActions: true,
              minTime: DateTime(2018, 3, 5, 12, 0),
              maxTime: DateTime(2019, 6, 7, 12, 0), onChanged: (date) {
            print('change $date');
          }, onConfirm: (date) {
            print('confirm $date');
            setState(() {
              dateTime = '${date.year}-${date.month}-${date.day}';
            });
          }, currentTime: DateTime.now(), locale: LocaleType.zh);
        },
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}

使用方法

在上面的代码中，我们创建了一个简单的 Flutter 应用程序，其中包含一个按钮，点击该按钮会弹出日期选择器。以下是关键部分的解释：

1. 导入必要的库：

   import 'package:flutter/material.dart';
   import 'package:gd_datetime_picker/gd_datetime_picker.dart';
   import 'package:gd_datetime_picker/i18n_model.dart';
   

2. 初始化应用程序：

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

3. 创建主应用程序类：

   class MyApp extends StatefulWidget {
     const MyApp({super.key});
   
     @override
     State<MyApp> createState() => _MyAppState();
   }
   
   class _MyAppState extends State<MyApp> {
     @override
     void initState() {
       super.initState();
     }
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(body: MyHomePage()),
       );
     }
   }
   

4. 创建主页面类：

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

5. 实现主页面状态类：

   class _MyHomePageState extends State<MyHomePage> {
     String dateTime = '';
   
     @override
     void initState() {
       super.initState();
       DateTime now = DateTime.now();
       dateTime = '${now.year}-${now.month}-${now.day}';
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: const Text('插件示例应用'),
         ),
         body: Center(
           child: Text('时间是: $dateTime'),
         ),
         floatingActionButton: FloatingActionButton(
           onPressed: () {
             DatePicker.showDatePicker(context,
                 showTitleActions: true,
                 minTime: DateTime(2018, 3, 5, 12, 0),
                 maxTime: DateTime(2019, 6, 7, 12, 0), onChanged: (date) {
               print('change $date');
             }, onConfirm: (date) {
               print('confirm $date');
               setState(() {
                 dateTime = '${date.year}-${date.month}-${date.day}';
               });
             }, currentTime: DateTime.now(), locale: LocaleType.zh);
           },
           tooltip: '增加',
           child: const Icon(Icons.add),
         ),
       );
     }
   }