DateField in Flutter Made Easy

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

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.

dependencies:
   date_field: ^0.1.2
   ...

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:

DateTime selectedData;
...
Widget buid(...) {
...
return DateField(
    onDateSelected: (DateTime value) {
      setState(() {
        selectedData = value;
      });
     },
     selectedDate: selectedData,
  );