2 Easy Ways to Format DateTime in Flutter + Cheatsheet

A Date help users identify the time when the event has happened or will happen in the future. Displaying the date might be a critical feature for your app. For example, a messaging app must display a date on which the message is sent or received. But displaying the date without formatting might not be a good choice as the date might not be in the human-readable format. So in this tutorial, we’ll see the 2 easy ways to format DateTime in Flutter.

Note: The dates are formated and shown in the ‘en_US’ locale.

At the end of this tutorial, you’ll be able to format a DateTime in the following format and more:

Here’s what we’ll cover:

• The Problem
• Ways to Format DateTime in Flutter
  1. Using Standard Formats
  2. Using Custom Pattern
• Showing Locale based Date

The Problem

The DateTime value generated in the app or received from somewhere else might not be readable to your users and might look something like this:

Ways to Format DateTime in Flutter

There are two ways you can format a DateTime in Flutter. You can use any of the following based on your requirement.

1. Using Standard Formats
2. Using Custom Pattern

1. Using Standard Formats

To format DateTime in Flutter using a standard format, you need to use the intl library and then use the named constructors from the DateFormat class. Simply write the named constructor and then call the format() method with providing the DateTime.

Step 1: Add the intl package.

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  intl: ^0.17.0 # <-- SEE HERE

Step 2: Get the date that you want to format.

DateTime now = DateTime.now();

Step 3: Use the named constructor and then call the format() method and then provide the date. 

String formattedDate = DateFormat.yMMMEd().format(now);

Note: The format function gives you the result in String.

Step 4: Use the formated string wherever you like.

print(formattedDate);

Code Example:

DateTime now = DateTime.now();
String formattedDate = DateFormat.yMMMEd().format(now);
print(formattedDate);

Output:

Tue, Jan 25, 2022

Cheatsheet:

2. Using Custom Pattern

Sometimes, your designer may ask you to show a date in a format that is not part of the standard format. In such a situation, you can write your own customized pattern to format a date.

The steps to writing the custom pattern are almost the same as previous. The only change is, instead of adding the named constructor, you should write the exact pattern in which you want to format the date.

Code Example:

DateTime now = DateTime.now();
formattedDate = DateFormat('EEEE, MMM d, yyyy').format(now);
print(formattedDate);

Output:

Tuesday, Jan 25, 2022

Cheatsheet:

Showing Locale based Date

Sometimes, you may want to format a date in a specific locale. For example, showing the date in Indian format.

To format the DateTime based on locale, you should first add the intl package as mentioned in the previous steps and then write the below code:

Code Example:

DateTime now = DateTime.now();
initializeDateFormatting('en-IN', '')
    .then((_) => print(DateFormat.yMd('en-IN').format(now)));

Output:

25/1/2022 <-- Date in Indian format

Conclusion

In this tutorial, we learned the 2 easy ways to format DateTime in Flutter with practical examples. We also saw how you can display the Date based on locale and with the help of a cheatsheet you are now able to identify the pattern and format the DateTime accordingly.

Would you like to check other interesting Flutter tutorials?