Flutter 日期时间DatePicker控件及国际化

注意：无特殊说明，flutter版本及dart版本如下：

• flutter版本： 1.12.13+hotfix.5
• dart版本： 2.7.0

datepicker

flutter并没有datepicker这个控件，需要使用showdatepicker方法弹出日期选择控件，基本用法如下：

raisedbutton(
  onpressed: () async {
    var result = await showdatepicker(
        context: context,
        initialdate: datetime.now(),
        firstdate: datetime(2020),
        lastdate: datetime(2021));
    print('$result');
  },
)

initialdate初始化时间，通常情况下设置为当前时间。

firstdate表示开始时间，设置后，选择器不能选择小于此值的时间。

lastdate表示结束时间，设置后，选择器不能选择大于此值的时间。

showdatepicker方法是future方法，点击日期选择控件的“确定按钮后，返回选择的日期。

效果如下：

selectabledaypredicate参数控制可选日期，返回true表示日期可选，用法如下：

showdatepicker(
  selectabledaypredicate: (datetime day) {
    return day.difference(datetime.now()).indays < 2;
  },
  ...
)

表示后天之前的时间可选，效果如下：

19日及以后的日期变为灰色，不可选状态。

builder参数用于设置设置子控件，比如设置深色主题用法如下：

showdatepicker(
  builder: (context, child) {
    return theme(
      data: themedata.dark(),
      child: child,
    );
  },
    ...
)

效果如下：

中文支持

增加国际化处理，在pubspec.yaml添加支持：

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter    

在*控件materialapp添加国际化支持：

materialapp(
  localizationsdelegates: [
    globalmateriallocalizations.delegate,
    globalwidgetslocalizations.delegate,
  ],
  supportedlocales: [
    const locale('zh', 'ch'),
    const locale('en', 'us'),
  ],
  locale: locale('zh'),
  ...
)

设置showdatepicker的local参数如下：

showdatepicker(
  locale: locale('zh'),
  ...
)

效果如下：

timepicker

timepicker和datepicker一样，需要使用showtimepicker方法，用法如下：

raisedbutton(
  onpressed: () async {
    showtimepicker(
        context: context, initialtime: timeofday.now());
  },
)

效果如下：

​ builder参数用于控制子控件，可以向datepicker一样设置深色主题，还可以设置其显示24小时，用法如下：

showtimepicker(
    context: context,
    initialtime: timeofday.now(),
    builder: (context, child) {
      return mediaquery(
        data: mediaquery.of(context)
            .copywith(alwaysuse24hourformat: true),
        child: child,
      );
    });

效果如下：

中文支持

添加国际化支持，步骤同datepicker中文支持，但showtimepicker并没有local参数，使用builder参数设置，如下：

showtimepicker(
    context: context,
    initialtime: timeofday.now(),
    builder: (context, child) {
      return localizations(
          locale: const locale('zh'),
          child: child,
          delegates: <localizationsdelegate>[
            globalmateriallocalizations.delegate,
            globalwidgetslocalizations.delegate,
          ]
      );
    });

效果如下：

cupertinodatepicker

ios风格的日期选择器，用法如下：

 var _datetime = datetime.now();
cupertinodatepicker(
  initialdatetime: _datetime,
  ondatetimechanged: (date) {
    setstate(() {
      _datetime = date;
    });
  },
)

效果如下：

mode参数设置日期的格式：

• time：只显示时间，效果：4 | 14 | pm
• date：只显示日期，效果：july | 13 | 2012
• dateandtime：时间和日期都显示，效果： fri jul 13 | 4 | 14 | pm

设置最大日期和最小日期：

cupertinodatepicker(
  minimumdate: datetime.now().add(duration(days: -1)),
  maximumdate: datetime.now().add(duration(days: 1)),
  ...
)

效果如下：

使用24小时制：

cupertinodatepicker(
  use24hformat: true,
    ...
)

cupertinotimerpicker

cupertinotimerpicker 是ios风格的时间选择器，基本用法如下：

cupertinotimerpicker(
  ontimerdurationchanged: (duration duration){
  },
)

效果如下：

设置只显示小时和分钟：

cupertinotimerpicker(
  mode: cupertinotimerpickermode.hm,
  ...
)

默认情况下，cupertinotimerpicker显示0：0：0，设置显示当前时间：

var now = datetime.now();
return container(
  height: 200,
  child: cupertinotimerpicker(
    initialtimerduration: duration(hours: now.hour,minutes: now.minute,seconds: now.second),
    ontimerdurationchanged: (duration duration) {},
  ),
);

欢迎加入flutter的微信交流群(mqd_zzy)，一起学习，一起进步，生活不止眼前的苟且，还有诗和《远方》。

当然我也非常希望您关注我个人的公众号，里面有各种福利等着大家哦。