Flutter中使用第三方时间选择器插件

越陌度阡

发布于 2021-01-05 14:19:45

1.8K0

发布于 2021-01-05 14:19:45

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

1. 安装插件

配置flutter_cupertino_date_picker。

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  date_format: ^1.0.6
  flutter_cupertino_date_picker: ^1.0.26+2

在pubspec.yaml中配置保存后，在VS Code环境中会自动下载依赖包。

如果无法正常下载，执行 flutter pub get 。

2. 引入插件

在需要用到的该插件文件中引入插件包。

import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';

3. 使用插件

DateTime _dateTime=DateTime.now();

// 显示时间的方法
void _showDatePicker(){

    DatePicker.showDatePicker(
        context,
        onMonthChangeStartWithFirstDate: true,

        // 如果报错提到 DateTimePickerTheme 有问题，点开这个类的原文件作如下修改。
        // 移除'with DiagnosticableMixin'或者将'DiagnosticableMixin'改成'Diagnosticable'.
        pickerTheme: DateTimePickerTheme(
            showTitle: true,
            confirm: Text('确认', style: TextStyle(color: Colors.red)),
            cancel: Text('取消',style:TextStyle(color:Colors.cyan))
        ),

        minDateTime: DateTime.parse("1970-01-01"),
        maxDateTime: DateTime.parse("2050-01-01"),

        initialDateTime: _dateTime,

        // 显示日期
        // dateFormat: "yyyy-MMMM-dd",
        
        // 显示日期与时间
        dateFormat:'yyyy年M月d日    EEE,H时:m分',  // show TimePicker
        pickerMode: DateTimePickerMode.datetime,  // show TimePicker


        locale: DateTimePickerLocale.zh_cn,

        onChange: (dateTime, List<int> index) {
            setState(() {
                // 初始及修改保存后的时间
                _dateTime = dateTime;
            });
        },
        onConfirm: (dateTime, List<int> index) {
            setState(() {
                // 初始及修改保存后的时间
                _dateTime = dateTime;
            });
        },
    );
    
}

4. 代码完整示例

import 'package:flutter/material.dart';

// 引入第三方插件
import 'package:date_format/date_format.dart';
import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';

class DatePickerPage extends StatefulWidget {
    DatePickerPage({Key key}) : super(key: key);
    @override
    _DatePickerPageState createState() => _DatePickerPageState();
}

class _DatePickerPageState extends State<DatePickerPage> {

    DateTime _dateTime=DateTime.now();

    // 显示时间的方法
    void _showDatePicker(){

        DatePicker.showDatePicker(
            context,
            onMonthChangeStartWithFirstDate: true,

            // 如果报错提到 DateTimePickerTheme 有问题，点开这个类的原文件作如下修改。
            // 移除'with DiagnosticableMixin'或者将'DiagnosticableMixin'改成'Diagnosticable'.
            pickerTheme: DateTimePickerTheme(
                showTitle: true,
                confirm: Text('确认', style: TextStyle(color: Colors.red)),
                cancel: Text('取消',style:TextStyle(color:Colors.cyan))
            ),

            minDateTime: DateTime.parse("1970-01-01"),
            maxDateTime: DateTime.parse("2050-01-01"),

            initialDateTime: _dateTime,

            // 显示日期
            // dateFormat: "yyyy-MMMM-dd",
            
            // 显示日期与时间
            dateFormat:'yyyy年M月d日    EEE,H时:m分',  // show TimePicker
            pickerMode: DateTimePickerMode.datetime,  // show TimePicker


            locale: DateTimePickerLocale.zh_cn,

            onChange: (dateTime, List<int> index) {
                setState(() {
                    // 初始及修改保存后的时间
                    _dateTime = dateTime;
                });
            },
            onConfirm: (dateTime, List<int> index) {
                setState(() {
                    // 初始及修改保存后的时间
                    _dateTime = dateTime;
                });
            },
        );
        
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text("DatePicker")),
            body:Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                            // 添加点击水波纹效果
                            InkWell(
                                child:Row(
                                    children: <Widget>[
                                        Text("${formatDate(_dateTime,[yyyy,'年',mm,'月',dd,' ',HH,':',nn])}"),
                                        Icon(Icons.arrow_drop_down)
                                    ],
                                ),
                                onTap:_showDatePicker
                            )
                        ],
                    )
                ],
            ) 
        );
    }
}

效果图如下：