flutter 中时间和日期获取以及格式转换

  前言：

        在Android  和iOS  常用的App里面经常有获取当前时间和日期 原生的android  和iOS 有系统的api提供很详细 这边我就不展开讲了 今天主要说说flutter 中如何获取时间和日期 以及时间戳的格式转换

---

效果图：

                                                                        日期选择 

                                                                           时间选择 

1需要用到的三方库  以及选择器中文汉的配置 :

flutter_localizations:

sdk: flutter

date_format: ^1.0.8

把这些复制到 pubspec.yaml 里面 

然后在控制台敲flutter  pub get  命令下载依赖

2 具体的效果实现

我们写了两个Row组件里面嵌套  Text  和Icon 来进行测试  外层嵌套InkWell 来实现点击效果  

我们在onTap方法里面来对我们获取时间和日期进行操作  

下面我们再说明我们怎么获取但当前时间和日期  

首先要import 进来  import 'package:date_format/date_format.dart';   依赖 

然后通过

  DateTime_nowDate=DateTime.now();

var _nowTime=TimeOfDay(hour:12,minute:20); 

分别获取当前日期和时间

然后我们调起的日期选择器和时间选择器

日期选择器 :

_showDatePciker()async{

var  reslut =await showDatePicker(

context:context,

      initialDate:_nowDate,

      firstDate:DateTime(1900),

      lastDate:DateTime(2050),

      );

    setState(() {

this._nowDate=reslut;

    });

}

时间选择器 :

_showTimePciker()async {

var  result=await  showTimePicker(

context:context,

        initialTime:_nowTime);

  setState(() {

this._nowTime=result;

  });

}

分别在setState 方法里面 将result 赋值给当前的时间和日期变量  

this._nowDate=reslut;  

this._nowTime=result;

3我们在具体显示组件里面替换

InkWell(

child:Row(

mainAxisAlignment: MainAxisAlignment.center,

      children: [

Text("${formatDate(_nowDate, [yyyy, '年', mm, '月', dd])}"),

        Icon(Icons.arrow_drop_down)

],

    ),

    onTap: _showDatePciker

/* onTap: _showDatePciker()*/

),

我们要注意将获取的时间格式进行转换 

日期 :Text("${formatDate(_nowDate, [yyyy, '年', mm, '月', dd])}"), 

时间：Text("${_nowTime.format(context)}"),

到此我们就能实现日期选择和时间选择 但是选择器的界面默认是英文的 为了符合国人习惯我们要做汉化处理 

我们需要在程序入口的MaterialApp 里面进行配置 

MaterialApp(

home:Scaffold(

appBar:AppBar(

title:Text("主页"),

    ),

    body:MyHomePage(),

  ),

  localizationsDelegates: [

//此处

    GlobalMaterialLocalizations.delegate,

    GlobalWidgetsLocalizations.delegate,

  ],

  supportedLocales: [

//此处

    const Locale('zh', 'CH'),

    const Locale('en', 'US'),

  ],

);

配置以后 如果手机是中文的ROM系统 选择器界面就会变成中文显示   

---

最后总结：

这个时间日期选择相对简单需要用到三方库 date_format: ^1.0.8    和语言国际化配置 flutter_localizations:sdk: flutter  ,相对简单 ，和原生app时间选择器效果 也非常的接近 算是比较好用，我也是一个flutter学习的新手 有兴趣的同学可以私聊多多交流