How to Format Dates in Flutter?

Understanding Dates in Dart

As we have already mentioned that Dart is the language on which Flutter is based, we will first look into how dates are formatted in Dart before jumping to the Flutter part of the same thing. Dart comes with a built-in class called 'DateTime'. It provides us to perform a range of operations such as retrieving the current date and time, comparing dates, and adding or subtracting time durations.

Formatting Dates in Flutter

We use the intl package to format dates in Flutter. The major advantage of using the intl package lies in the fact that it provides localization support and a set of classes for formatting dates, numbers, and other types of data. We can add the intl package to our flutter project by simply including it in the pubspec.yaml file and then running the flutter pub get in our terminal to fetch the required dependencies.

1. Formatting dates using default formats:

We can use the DateFormat in Flutter to use the various predefined formats which are offered by the class. for instance the DateFormat.yMd() is used to format dates in the year/month/day format. Similarly, DateFormat.EEEE() is used for formatting the full weekday name, and DateFormat.jms() for formatting time in hour:minute:second format. The DateFormat in Flutter is popularly used due to the ease of using it.

2. Customizing Date Formats

Flutter provides the developers with the methods like 'addPattern()' and 'setPattern()' that enable developers to specify their own date format patterns.

3. Localization of the Dates

The users of your Flutter application might belong to different regions and locales. We need to take care of this fact and therefore have to present the dates in such a manner that it aligns with their preferences. We can automatically format dates accordingly by using the 'DateSymbols' object along with the DateFormat in Flutter.

4. Relative Time Formatting

Sometimes, it is a better idea to show the relative time such as "Just Now", "2 minutes ago", or "Yesterday", etc. in contrast to displaying the exact time. The 'Intl' class provides convenient methods like 'Intl.relativeTime()' to format dates relative to the current time.

Localizing Dates in Flutter

It is the process of creating an application such that it can adapt to different countries, regions, and time zones. The intl package helps in this localization. We have to provide the appropriate locale parameter when formatting dates with DateFormat in order to display the dates in the correct format. This allows us to format the dates for different languages. For example, the intl package helps us to display the dates in French, German or Dutch locales differently.

Formatting Date Ranges

While working with the date ranges, we are often required to present them in a concise and meaningful manner. The intl package provides several powerful tools for the same job. For the job of formatting the date ranges, we first need to define the start and end dates of the range. Then we create an instance of the DateFormat with the desired format pattern. Finally, we format the start and end dates and then display it.

Handling Time Zones

The users of our application might belong to different time zones as well. We have the 'timezone' package which offers functionalities to work with different time zones. We can convert the dates from one time zone to another accurately and present the time regardless of the user's location.

Example App

Github Repository link : scaler_format_dates

This is the demo of the Example App which we have built by combining all the essential utilities related to formatting dates in flutter.

main.dart File

Github link : main.dart

demo.dart File

Github link: demo.dart

This file redirects us to all the other files.

displaying_time.dart File

Github link: displaying_time.dart

The code below demonstrates the usage of DateFormat in Flutter. Here, we are simply displaying the current time using the DateFormat in Flutter.

localizing_dates.dart File

Github link: localizing_dates.dart

formatting_date_ranges.dart File

Github link : formatting_date_ranges.dart

handling_time_zones.dart File

Github link: handling_time_zones.dart