How To Format Date and Time in Flutter

Introduction

In a Flutter app, it's often necessary to display dates and times to users. However, formatting date and time can be a bit tricky, especially if you're new to the Flutter framework. Fortunately, there are several built-in tools and functions that make it easy to format dates and times in Flutter apps.

Original source of this article can be found in axxellance

In this article, we'll explore how to format dates and times in Flutter, step by step. We'll cover the basics of displaying dates and times in your app, including how to use the DateFormat class to format dates and times according to different patterns. We'll also show you how to customize the formatting to meet your specific needs.

Whether you're building a simple Flutter app or a more complex one, knowing how to format date and time correctly can make a big difference in your app's user experience. So let's get started and learn how to format dates and times in Flutter!

Step 1: Install / Add the intl Flutter package to your project

Before you can format the Flutter DateTime or dates and times value you will first need to install the intl Flutter package in your project using either

With Dart:

dart pub add intl

With Flutter:

flutter pub add intl

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):

dependencies:
  intl:^0.18.1 // This was the current version at the time of this writing

Step 2: Importing DateFormat Class from the intl package

The next step is to import the DateFormat class from the intl package. The DateFormat class is a built-in class in the Flutter framework that allows us to format dates and times according to different patterns.

To import the DateFormat class, add the following code to the top of your file:

import 'package:intl/intl.dart';

Step 3: Formatting Date and Time

Once you have imported the DateFormat class, you can use it to format dates and times in your app. To format a date, you can use the format() method of the DateFormat class.

Here's an example:

DateTime now = DateTime.now();
String formattedDate = DateFormat('dd/MM/yyyy - HH:mm:ss').format(now);
print(formattedDate); // 19/04/2023 - 11:15:45

In this example, we get the current date and time using the DateTime.now() method, and then we format the date using the DateFormat class. The pattern 'dd/MM/yyyy' is used to format the date as day/month/year, while the pattern 'HH:mm:ss' is used to format the time as hour:minute:second.

Step 4: Customizing Date and Time Formatting

The DateFormat class provides a variety of patterns that can be used to format dates and times. You can customize the patterns to meet your specific needs. Here are some common patterns that can be used:

Watermark DateTime Custom2x.png
(Image gotten from: https://www.flutterbeads.com/format-datetime-in-flutter)

d: Day of the month (1-31)
E: Day of the week (e.g. Mon, Tue)
M: Month (1-12)
y: Year (e.g. 2023)
H: Hour in 24-hour format (0-23)
h: Hour in 12-hour format (1-12)
m: Minute (0-59)
s: Second (0-59)
a: AM/PM marker

For example, to format the date as weekday, month day, year, you can use the pattern 'EEEE, MMMM d, y'. Here's an example:

DateTime now = DateTime.now(); 
String formattedDate = DateFormat('EEEE, MMMM d, y').format(now);
print(formattedDate); // Wednesday, April 19, 2023

Step 5: Showing Locale Based Date

You might occasionally want to format a date using a certain locale. displaying the date in Nigeria format, for instance. You must first include the intl package as described in the previous steps before writing the following code below to format the DateTime based on locale:

DateTime now = DateTime.now();
initializeDateFormatting('en-NG', '')
.then((_) {
    print(DateFormat.yMd('en-NG').format(now));
});

FAQs

How to get the current time in Flutter?
The DateTime.now() method in Flutter can be used to retrieve the current DateTime data, the current date and time are returned by this method as a DateTime object. The TimeOfDay.now() method, which produces a TimeOfDay object containing the current time, can be used to obtain only the current time. Here's an illustration:
```
DateTime now = DateTime.now();
TimeOfDay currentTime = TimeOfDay.now();
print('Current date and time: $now'); // Current date and time: 2023-04-04 15:23:45.678901
print('Current time: $currentTime'); // Current time: 3:23 PM
```
How to get the only date from DateTime in Flutter?
In Flutter, you may extract just the date from a DateTime object by setting the DateTime object to the local time zone using the toLocal() method and then using the toString() method with a format string that just contains the date fields. Here's an example:
```
DateTime now = DateTime.now();
String formattedDate = DateFormat('yyyy-MM-dd').format(now.toLocal());
```
How to get time in Flutter?
The DateTime.now() method in Flutter can be used to retrieve the current time. A DateTime object containing the current date and time will be returned. Using the hour, minute, and second properties of this object, you can get the current time. Here is an example of some code:
```
DateTime now = DateTime.now();
int hour = now.hour;
int minute = now.minute;
int second = now.second;
print('$hour $minute $second');
```
How to parse a DateTime string or Date string in Flutter?
To parse a date string in Flutter, you can use the DateTime.parse() method. This method takes a string that represents a date and time in a specific format and returns a DateTime object. Here's an example of how to parse a date string:
```
String dateString = '2022-05-01 14:30:00';
DateTime dateTime = DateTime.parse(dateString);
```
Other Type of Date Format Pattern

Conclusion

In conclusion, formatting dates and times in a Flutter app is important for creating a good user experience. By using the DateFormat class, you can easily format dates and times according to your specific needs and handle time zones correctly.

By following the steps outlined in this article, you can customize date and time formatting in your Flutter app to meet your exact requirements. Whether you need to display dates and times in a specific format or need to handle time zone conversions, you now have the knowledge and tools to do so.

Incorporating well-formatted dates and times into your app can improve its overall usability and make it more user-friendly. So take the time to master date and time formatting in Flutter and create a better user experience for your app's users.

Thank you for reading this article on how to format dates and times in Flutter. We hope you found it informative and useful. If you have any questions or feedback, please feel free to leave a comment below.

Follow ME

Hey there! If you're interested in tech or programming articles, you should definitely give me a follow on any of the social media platforms below. I regularly post articles related to tech and programming, and I share valuable resources and insights. Plus, by following me, you'll be able to stay up to date on all the latest and greatest in the world of tech and programming. So, what do you say? Will you give me a follow?

Follow me on Dev.to, Twitter, LinkedIn, GitHub, Medium, Facebook, and my blog's Facebook page.