DateField in Flutter Made Easy

Did you wonder how to display a date field in Flutter? Here is how to do so!

Gaspard Merten
Mar 31, 2020 · 3 min read
Photo by Aron Visuals on Unsplash

What you probably did if you already have a DateField in your Flutter project is to create it from scratch! But did you know that you could use this package to simplify your life a lot?

First, as usual, just add it to your pubspec.yaml file.

Now after a little pub get you should be able to access the package content!

Let’s try it

First, let’s just try to display a simple DateField in our view. There are two important parameters:

  1. onDateSelected which is triggered whenever the user picks a date!
  2. selectedDate which will be the date displayed in the field, if it is null, it will display a placeholder.

So a simple implementation would give us the following:

And the result should look like:

DateField examples

Now that we saw the basis,

let’s go a little bit further…

If you want your user to pick a date within a specified range, you should make use of the firstDate and lastDate parameters.

Example:

And now when the user picks a date, the dialog will look like that:

Date picker dialog with firstDate and endDate

and even more further…

Now let’s see how we can customize this DateField, for that we have three interesting parameters:

  1. decoration: which allows us to completely customize the field decoration.
  2. label: which can be used to rename the field.
  3. dateFormat: which can be used to change the way the date is shown.

Long story short, here is an example of how to combine those three parameters:

And the result is a field in a different style:

DateField with custom decoration, label, and date format

Flutter Community

Articles and Stories from the Flutter Community

Gaspard Merten

Written by

Engineering student and IT enthusiast. I developed many softwares for various startups and well-established companies, thus further enhancing my Flutter skills.

Flutter Community

Articles and Stories from the Flutter Community

Gaspard Merten

Written by

Engineering student and IT enthusiast. I developed many softwares for various startups and well-established companies, thus further enhancing my Flutter skills.

Flutter Community

Articles and Stories from the Flutter Community

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store