DateField in Flutter Made Easy

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,
  );

And the result should look like:

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 :

DateTime selectedData;...Widget buid(...) {
...return DateField(
    onDateSelected: (DateTime value) {
      setState(() {
        selectedData = value;
      });
     },
     firstDate: DateTime(2020, 3, 8),
     lastDate: DateTime(2020, 3, 20),
     selectedDate: selectedData,
  );

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

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:

DateTime selectedData;...Widget buid(...) {
...return DateField(
    onDateSelected: (DateTime value) {
      setState(() {
        selectedData = value;
      });
     },
     decoration: InputDecoration(
       border: OutlineInputBorder()
     ),
     label: 'My date field',
     dateFormat: DateFormat.yMd(),
     selectedDate: selectedData,
  );

And the result is a field in a different style: