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
- Showing Locale based Date
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.
- Using Standard Formats
- 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.
DateTime now = DateTime.now(); String formattedDate = DateFormat.yMMMEd().format(now); print(formattedDate);
Tue, Jan 25, 2022
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.
DateTime now = DateTime.now(); formattedDate = DateFormat('EEEE, MMM d, yyyy').format(now); print(formattedDate);
Tuesday, Jan 25, 2022
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:
DateTime now = DateTime.now(); initializeDateFormatting('en-IN', '') .then((_) => print(DateFormat.yMd('en-IN').format(now)));
25/1/2022 <-- Date in Indian format
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?