How to Format DateTime in Flutter
As a Flutter developer, you will often encounter the need to format dates in various formats and languages. In this post, we will explore different methods of formatting dates in Flutter, including the use of the DateTime class and the powerful intl package. We will also discuss best practices and provide practical examples to help you master date formatting in your Flutter applications.
1. Formatting Dates with the DateTime class
Flutter's built-in DateTime class allows you to work with dates and times. By combining it with string manipulation, you can format dates to meet your specific requirements. Let us start with a basic example:
import 'package:flutter/material.dart';
void main() {
DateTime now = DateTime.now();
String formattedDate = '${now.day}/${now.month}/${now.year}';
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Date Format demo'),
),
body: Center(
child: Text(
formattedDate,
style: const TextStyle(fontSize: 36),
),
),
),
),
);
}
In this example, we use DateTime.now() to obtain the current date and time. Then, we construct a formatted date string by concatenating the day, month, and year. The date is displayed in the format day/month/year.
While this approach works for simple date formatting needs, it lacks the flexibility and localization support provided by the intl package.
2. The Power of the intl Package
The intl package is a widely used and powerful solution for formatting dates and working with localization in Flutter. Let us dive into an example that showcases its capabilities:
Add the intl package to your pubspec.yaml file, by executing the following command: flutter pub add intl. After that, make sure your pubspec.yaml file includes at least the following dependencies:
dependencies:
flutter:
sdk: flutter
intl: ^0.18.1
Now that we have the package installed we can change our code accordingly, see the code snippet below:
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
void main() {
DateTime now = DateTime.now();
String formattedDate = DateFormat('dd/MM/yyyy').format(now);
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Date Format demo'),
),
body: Center(
child: Text(
formattedDate,
style: const TextStyle(fontSize: 36),
),
),
),
),
);
}
In this example, we import the intl package and use the DateFormat class to format dates. We specify the desired format using a pattern string. Here, the date is formatted in the format day/month/year.
Between the first and the second screenshot, you may notice that we now have a leading zero in front of single numbers. This format is already more convenient than the previous implementation. Not only that, it was much easier to implement.
By using the intl package, we gain more flexibility and localization support, allowing us to format dates in a variety of formats and languages.
3. Formatting Dates with Localization Support
When working with date formatting and localization in Flutter, it is important to use the appropriate date formatting for the desired locale. This ensures that the date is formatted correctly according to the conventions and preferences of that locale.
To achieve this, we use the initializeDateFormatting function from the intl package. This function initializes the necessary data and resources for date formatting in the specified locale. It is crucial to call this function before performing any date formatting operations.
Consider the following example, where we format the date in French using the fr_FR locale:
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:intl/date_symbol_data_local.dart';
void main() {
initializeDateFormatting('fr_FR').then((_) {
DateTime now = DateTime.now();
String formattedDate = DateFormat('EEEE, dd MMMM yyyy', 'fr_FR').format(now);
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Date Format demo'),
),
body: Center(
child: Text(
formattedDate,
style: const TextStyle(fontSize: 36),
),
),
),
),
);
});
}
In this code snippet, we first call the initializeDateFormatting function with the 'fr_FR' locale as the first argument. This ensures that the date formatting is set up for the French language.
After initializing the date formatting, we proceed to format the date using the DateFormat class, specifying the pattern 'EEEE, dd MMMM yyyy' for day of the week, the day, month (in full name), and year. The second argument of DateFormat specifies the locale as 'fr_FR', ensuring that the date is formatted according to the French language and conventions.
As you can see our date is now displayed in French. Now that we understand the basics for localization, let us check out the possible formats from the DateFormat class.
4. List of Common Format Patterns
The intl package offers a wide range of format patterns for date and time formatting. Here are some commonly used format patterns:
d: Day of the month as a single digit when applicable (1-31).dd: Day of the month as a two-digit number (01-31).M: Month as a single digit when applicable (1-12).MM: Month as a two-digit number (01-12).MMM: Abbreviated month name (Jan, Feb, Mar, etc.).MMMM: Full month name (January, February, March, etc.).y: Year as a two-digit number (00-99).yy: Year as a two-digit number (e.g., 21 for 2021).yyy: Year as a three-digit number (e.g., 021 for 2021).yyyy: Year as a four-digit number (e.g., 2021).h: Hour in 12-hour clock format as a single digit when applicable (1-12).hh: Hour in 12-hour clock format as a two-digit number (01-12).H: Hour in 24-hour clock format as a single digit when applicable (0-23).HH: Hour in 24-hour clock format as a two-digit number (00-23).m: Minute as a single digit when applicable (0-59).mm: Minute as a two-digit number (00-59).s: Second as a single digit when applicable (0-59).ss: Second as a two-digit number (00-59).a: AM/PM marker (AM or PM).E: Day of the week abbreviation (Mon, Tue, Wed, etc.).EEEE: Full day of the week name (Monday, Tuesday, Wednesday, etc.).
These are just a few examples of the available format patterns. You can combine them as needed to create custom date and time formats that suit your specific requirements, see the examples below:
String formattedDate1 = DateFormat('dd/MM/yy').format(now);
String formattedDate2 = DateFormat('MMMM d, yyyy').format(now);
String formattedTime1 = DateFormat('h:mm a').format(now);
String formattedTime2 = DateFormat('HH:mm:ss').format(now);
String formattedDateTime = DateFormat('EEEE, MMMM d, yyyy - HH:mm').format(now);
These patterns will format the dates and times as shown in the screenshot below:
For more details and additional format options, you can refer to the official intl package documentation: intl package documentation.
5. DateFormat's predefined functions
The DateFormat class in the intl package also provides predefined functions that simplify the process of formatting dates and times. These functions offer different formatting styles for dates, months, days, years, and times, allowing you to achieve the desired presentation of your date and time values.
These functions also take the locale as their first argument. So, if we want to use the predefined function to create the same example as before, using the French locale, our code would look like this:
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:intl/date_symbol_data_local.dart';
void main() {
initializeDateFormatting('fr_FR').then((_) {
DateTime now = DateTime.now();
String formattedDate = DateFormat.yMMMMEEEEd('fr_Fr').format(now);
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Date Format demo'),
),
body: Center(
child: Text(
formattedDate,
style: const TextStyle(fontSize: 36),
),
),
),
),
);
});
}
As you can see the code is pretty much the same. We only changed some of the code on line 8, from ('EEEE, dd MMMM yyyy', 'fr_FR') to yMMMMEEEEd('fr_Fr').
By using the predefined functions, we can achieve similar formatting. However, if you require more flexibility and specific formatting requirements, I recommend using the constructor of the DateFormat class. For instance, in the provided screenshot, the comma between the day of the week and the day is missing, which can be customized using the constructor.
To finish it up, here are some commonly used predefined functions that are available in the DateFormat class:
DateFormat.yMMMMEEEEd(): Formats the date with the full year, full month, full day of the week, and day of the month.DateFormat.yMMMMd(): Formats the date with the full year, full month, and day of the month.DateFormat.yMd(): Formats the date with the year, month, and day of the month.DateFormat.EEEE(): Formats the day of the week with the full name.DateFormat.MMMM(): Formats the month with the full name.DateFormat.MMM(): Formats the month with the abbreviated name.DateFormat.d(): Formats the day of the month.DateFormat.y(): Formats the year in numeric form.DateFormat.Hm(): Formats the time in 24-hour format with hour and minute.DateFormat.jm(): Formats the time in 12-hour format with hour and minute.DateFormat.jms(): Formats the time in 12-hour format with hour, minute, and second.DateFormat.yMMMMEEEEd().add_jms(): Formats the date and time with the full year, full month, full day of the week, day of the month, and time in 12-hour format with hour, minute, and second.
These are just some of the available functions. If you want more information about them, check out the DateFormat class.
6. Conclusion
Formatting dates in Flutter can be achieved using the built-in DateTime class or the intl package. The intl package offers extensive formatting options, including localization support, allowing you to handle dates in different formats and languages. By understanding these methods and patterns, you can effectively format dates to meet your specific needs in Flutter applications.
Whether you want to display dates in a specific language or customize their presentation, Flutter provides the necessary tools for accurate and localized date formatting.
