Easily pick a Date or a Time in your Flutter app

在Flutter应用中轻松选择日期或时间

I wrote a routine to quickly and easily pick a date or time in your Flutter app. It wasn’t an original concept but based on the work by developer, Miguel Ruivo. While working on my latest project, you see, I was looking for a means to pick a date and a time using Cupertino (iOS-style) widgets. That’s when I stumbled upon Miguel’s NativeCupertinoPicker.dart. It works with the CupertinoDatePicker class which supplies an iOS-style DateTime picker.

我编写了一个例程，可以快速轻松地在Flutter应用中选择日期或时间。 这不是最初的概念，而是基于开发人员Miguel Ruivo的工作。 您会看到，在处理我的最新项目时，我正在寻找一种使用Cupertino(iOS风格)小部件来选择日期和时间的方法。 那是我偶然发现Miguel的NativeCupertinoPicker.dart的时候 。 它与CupertinoDatePicker类一起使用，该类提供了iOS风格的DateTime选择器。

If I didn’t have Miguel’s work as a foundation of my own work, I wouldn’t have the time now to write about it here and share it with you. See how this works? I openly credit Miguel Ruivo here and now for my own contribution.

如果我没有将Miguel的作品作为自己作品的基础，那么我现在没有时间在这里写下它并与您分享。 看看这是如何工作的？ 我在此公开地赞扬Miguel Ruivo所做的贡献。

That’s the power of open source in this day and age. For example, we’re a fledgling community of developers, and our shared efforts contribute to that community as a whole. I’ll pay it forward now and offer the routine, showCupertinoDatePicker.dart, to our fledging Flutter community. Like Ruivo’s routine, my routine also utilizes the CupertinoDatePicker class which, in turn, works with the showCupertinoModalPopup function to display a circular ‘spinner’ at the bottom of the screen of your mobile app.

这就是当今时代开源的力量。 例如，我们是一个新兴的开发人员社区，我们的共同努力为整个社区做出了贡献。 我现在将其支付，并向我们刚刚起步的Flutter社区提供例程showCupertinoDatePicker.dart 。 像Ruivo的例程一样，我的例程也利用CupertinoDatePicker类 ， 该类又与showCupertinoModalPopup函数一起在移动应用程序屏幕的底部显示圆形“旋转器”。

Many of you will now take a copy of this routine and get on with your day. You’ve got deadlines, and besides, your manager will be coming around your desk shortly. Yes, take it and make it your own. I’ll invite the rest of you to stick around, and I’ll explain how to use this routine in your next Flutter app.

讯享网

现在，您中的许多人将复制此例程，然后开始自己的一天。 您有最后期限，此外，您的经理很快就会到您的办公桌旁走来。 是的，把它做成自己的。 我将邀请其他人继续学习，并在下一个Flutter应用程序中说明如何使用此例程。

仅屏幕截图。 单击要点。 (Screenshots Only. Click For Gists.)

As always, I prefer using screenshots over gists to show code in my articles. I find them easier to work with, and easier to read. However, you can click/tap on them to see the code in a gist or in Github. Ironically, it’s better to read this article about mobile development on your computer than on your phone. Besides, we program mostly on our computers; not on our phones. For now.

与往常一样，我更喜欢使用屏幕截图而不是要点来在文章中显示代码。 我发现它们更易于使用和阅读。 但是，您可以单击/点击它们以查看要点或Github中的代码。 具有讽刺意味的是，最好在计算机上阅读这篇文章，而不是在手机上阅读有关移动开发的文章。 此外，我们主要在计算机上编程； 不在我们的手机上。 目前。

没有运动图片没有社交媒体 (No Moving Pictures No Social Media)

Note, there will be gif files in this article demonstrating aspects of the topic at hand. However, it’s said viewing such gif files is not possible when reading this article on platforms like Instagram, Facebook, etc. Please, be aware of this and maybe read this article on medium.com

请注意，本文中将有gif文件，演示手头主题的各个方面。 但是，据说在Instagram，Facebook等平台上阅读本文时，无法查看此类gif文件。请注意这一点，并可能在medium.com上阅读此文章

Let’s begin.

让我们开始。

Android与iOS (Android vs iOS)

I’m currently working on an app for a client. Of course, it’s written in Flutter and will perform on an Android phone as well as an iPhone. Below, are screenshots of the same entry screen in the app I’m working on. Clicking on the date field or on the time field will display the appropriate means to pick another date or time depending on the platform. Easy peasy.

我目前正在为客户开发应用程序。 当然，它是用Flutter编写的，可以在Android手机和iPhone上执行。 以下是我正在处理的应用程序中相同输入屏幕的屏幕截图。 单击日期字段或时间字段将显示根据平台选择其他日期或时间的适当方法。 十分简单。