Futter基础第18篇： 实现调用原生时间选择器、日期选择器、时间戳、Future异步

效果图：

参考第三方库：https://pub.dev/packages/date_format

在pubspec.yaml，引入最新的依赖，我这里是

在相关类引入包名：

import ‘package:date_format/date_format.dart’;

时间戳转化演示：
时间戳就是时间在服务器存储的值，他跟正常我们看得的值是不一样的

//日期转化成时间戳：
var now = new DateTime.now();
print(now.millisecondsSinceEpoch);//单位毫秒，13 位时间戳

//时间戳转化成日期：
var now = new DateTime.now();
var a=now.millisecondsSinceEpoch; //时间戳
print(DateTime.fromMillisecondsSinceEpoch(a));

DatePicker.dart

import 'package:flutter/material.dart';

import 'package:date_format/date_format.dart';
import 'package:flutter/material.dart' as prefix0;

class DatePickerPage extends StatefulWidget {
  @override
  _DatePickerPageState createState() => _DatePickerPageState();
}

class _DatePickerPageState extends State<DatePickerPage> {

  DateTime _nowDate = DateTime.now();

  var _nowTime = TimeOfDay(hour: 12,minute: 20);  //初始化的时候时间值


  _showDatePicker() async{   //Flutter自带的日期组件       //获取异步数据方式二：通过async异步方法获取


    //获取异步数据方式一：通过then获取
//    showDatePicker(
//      context:context,
//      initialDate:_nowDate,     //当前日期
//      firstDate:DateTime(1980), //起始日期
//      lastDate:DateTime(2100)   //结束日期
//    ).then((result){
//      print(result);
//    });

    /**
     *  await 配合 async完成异步流程
     *  await表示等待异步请求，请求完后就把值赋给result
     *  我们再打印这个result即可拿到数据
     */
    var result = await showDatePicker(
        context:context,
        initialDate:_nowDate,     //当前日期
        firstDate:DateTime(1980), //起始日期
        lastDate:DateTime(2100),   //结束日期
        locale: prefix0.Locale('zh') // 非必须，如果操作系统是中文的话可以不加，如果不是的话，就要加上才能变成中文
    );

//    print(result);

    setState(() {
      this._nowDate = result; //将选择日期后的值赋给_nowDate
    });

  }

  _showTimePicker() async{    //Flutter自带的时间组件

  var result =  await showTimePicker(
      context:context,
      initialTime: _nowTime
    );

  setState(() {
    this._nowTime = result;
  });

  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //  var now = DateTime.now();

//    print(now);       //2019-11-17 12:23:06.811117
//    print(now.millisecondsSinceEpoch);    //1573964623294
/*  print(DateTime.fromMicrosecondsSinceEpoch(1573964623294));  //1970-01-19 13:12:44.623294*/

    print(formatDate(DateTime.now(), [yyyy, '年', mm, '月', dd]));

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DatePickerDemo'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              InkWell(         //让组件可以点击
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
//               Text('${_nowDate}'),
                    Text('${formatDate(_nowDate, [yyyy, '年', mm, '月', dd])}'), //使用第三方库按照指定形式显示数据
                    Icon(Icons.arrow_drop_down)
                  ],
                ),
                onTap: _showDatePicker,
              ),
              InkWell(         //让组件可以点击
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
//               Text('${_nowDate}'),
//                    Text('${_nowTime}'),    //这样显示的值是：TimeOfDay(07:26)  并不是我们想要的，所以要改成下面
                    Text('${_nowTime.format(context)}'),
                    Icon(Icons.arrow_drop_down)
                  ],
                ),
                onTap: _showTimePicker,
              )
            ],
          )
        ],
      ),
    );
  }
}

这里可能会遇到关于调用后，时间还为英文的情况，针对这种情况，解决办法为：

flutter showDatePicker显示中文日期_Flutter时间控件显示中文
如果看不懂教程，我还提供了一些代码变动截图，你们照着改就行：

pubspec.yaml

main.dart

导入国际化的包 flutter_localizations
import ‘package:flutter_localizations/flutter_localizations.dart’;

DatePicker.dart

  _showDatePicker() async{   //Flutter自带的日期组件       //获取异步数据方式二：通过async异步方法获取


    //获取异步数据方式一：通过then获取
//    showDatePicker(
//      context:context,
//      initialDate:_nowDate,     //当前日期
//      firstDate:DateTime(1980), //起始日期
//      lastDate:DateTime(2100)   //结束日期
//    ).then((result){
//      print(result);
//    });

    /**
     *  await 配合 async完成异步流程
     *  await表示等待异步请求，请求完后就把值赋给result
     *  我们再打印这个result即可拿到数据
     */
    var result = await showDatePicker(
        context:context,
        initialDate:_nowDate,     //当前日期
        firstDate:DateTime(1980), //起始日期
        lastDate:DateTime(2100),   //结束日期
        locale: prefix0.Locale('zh') // 非必须，如果操作系统是中文的话可以不加，如果不是的话，就要加上才能变成中文
    );

//    print(result);

    setState(() {
      this._nowDate = result; //将选择日期后的值赋给_nowDate
    });

  }