Exploring Flutter Packages: Date Time Picker

When it comes to developing applications, theres often some form of component or functionality that you need that doesn’t quite come as standard. In this new series I want to share some of the Flutter packages that I’ve been using in my projects – this is in the hope that it will help you to discover what’s out there to use in your projects, celebrate the work of the community and allow us to learn about how they can function within our projects.


In this first article I want to take a look at a package called DateTimePickerFormField. In a project that I’m currently working on I needed to allow the user to pick a date, and then show the selected date within a non-editable input field. Before I started to make this myself, I decided to do a quick search to see if something already existed. Whilst I wasn’t super hopeful (it kinda feels like a bit of a niche thing), I managed to come across the DateTimePickerFormField. This package provides a form element that when selected, shows a date / time selection dialog that once selected, then displays the selected date / time within the form field. The widget does all of the magic behind the scenes when it comes to date / time selection, keeping a state in the form of the DateTime class from the dart core library – giving a standard format to access once the user has selected a value from the picker.

screenshot.gif

The package comes with a single widget – the DateTimePickerFormField, we can see this in action on the left-hand side here. When it comes to making use of the component, we can add the date / time picker to our widget tree by making use of the DateTimePickerFormField:

DateTimePickerFormField(
          inputType: InputType.both,
          format: DateFormat('dd-MM-yyyy'),
          decoration: InputDecoration(
              border: OutlineInputBorder(),
              filled: true,
              fillColor: Colors.grey[200],
              onChanged: (selectedDate) => setState(
                  () => date = selectedDate),
          ),

Whilst the above shows you a simple implementation of the widget, there are a collection of properties that you can provide in the constructor to configure the widget in a number of ways.

  • inputType – The input type is the key part of configuration for the widget. This allows you decide what you want the user to be able to select – which can be either the value of InputType.date, InputType.time or InputType.both. For my implementation I only required the user to be able to select the date, so this was super helpful to have access to.
    • InputType.date will mean that only the date picker is shown
    • InputType.time will mean that only the time picker is shown
    • InputType.both means that the date picker will be shown, followed by the time picker
  • format – you may wish to display the value in a specific format within the field, then you can set this format using this property. This takes a DateFormat (for example, DateFormat(‘dd-MM-yyyy’)) and is a required property – so even if you don’t have a specific way in mind, then you will have to provide some form of default for this value. It would be nice if the plugin could use some default, based off of the locale, if one is not provided.
  • editable – When the user selects the field, you may not want them to manually be able to edit the value. This was the case for my implementation – I wanted to show the picker every time the field gained focus. With this property, setting editable to false will mean the user cannot manually edit the content of the field once a date / time has been selected. There is probably a use case where this might make sense, but personally I feel it provides a better UX to always show the picker, rather than allow for manual editing of the value.
  • onChanged – This allows you to provide a callback for when the value has been changed using the picker. If you wish to update the UI when a value has been selected, then this property will allow you to do so.
  • resetIcon – By default, the component shows a circular cross icon a the end of the widget. This allows user to clear any input that has been given to the field. It may be the case that you want to either customise the icon here, or simply not show one. For this you can either provide the desired Icon value, or pass a null value to not show anything here.
  • initialDate – When the date picker is shown, by default the current date is displayed. Using this property you can set an initial date to be shown within the picker. By default this shows the currently date, but this could be useful in situations where you want to start from a specific date to select.
  • firstDate – This allows you to set the first possible selectable date within the date picker. This is useful in situations where you don’t want to allow the user to select before a certain point in time.
  • lastDate – This allows you to set the last possible selectable date within the date picker. This is useful in situations where you don’t want to allow the user to select after a certain point in time.
  • initialTime – When the time picker is shown, by default noon is displayed. Using this property you can set an initial time to be shown within the picker.
  • validator – Used to validate the DateTime instance for the picker.
  • onSaved – Used to listen for when the enclosing form is saved.
  • onFieldSubmitted – When the enclosing form is submitted, this callback can be used to retrieve events for that state.
  • initialDatePickerMode – This can be used to set how the picker is shown in terms of the year, day and month in the form of a DatePickerMode. By default the month and day are shown using the value of day, but the year value can be used for the other configuration.
  • locale – The locale to be used for date / time formatting
  • selectableDayPredicate – Used to provide a function to calculate whether a day is enabled for selection or not. For example, this may be useful in situations where you want to disallow the user from selecting weekends
  • textDirection – Set the direction to be used when displaying text within the field. This can be one of either ltr or rtl – by default the system value will be used for this.

As you can see, the DateTimePickerFormField package provides us a way to simplify the selection of a date / time within our flutter apps. I’m already using this in an app that I’m working on and I’m sure it will provide value in future developments that I work on.

Are you already using this package? Or were you looking for something like this to utilise? I’d love to hear your thoughts! Be sure to pass on some thanks to the author if you do make use of it!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s