Displaying relative time, like "20 seconds ago" or "a minute ago," is essential for modern apps—be it social media feeds, news platforms, or chat apps. With the Dart package get_time_ago
, adding this feature to your Flutter app becomes a breeze. This package converts DateTime
objects into human-readable "time ago" strings, keeping your users informed and engaged.
In this guide, we'll show you how to integrate the get_time_ago
package into your Flutter project to easily display relative timestamps. Let's get started!
Why Choose get_time_ago
?
The get_time_ago
package simplifies the task of transforming DateTime
objects into easy-to-understand time formats. Whether you're developing a social media app, news site, or chat application, this package makes it clear when an event happened, helping users feel more connected to the content.
Version 2.0.0 of the package introduces various enhancements, including support for time units like seconds, minutes, hours, and days. You can even customize locale-specific messages, making it perfect for apps supporting multiple languages.
Key Features:
- Supports multiple languages.
- Automatically formats time units (seconds, minutes, hours, days).
- Customizable messages for different locales.
What's New in Version 2.0.0?
Version 2.0.0 introduces some breaking changes. Most notably:
-
New
justNow
Method: This method handles events that occurred within the last few seconds. If you're upgrading from a previous version and have custom message implementations, you'll need to add this method to avoid compilation issues.
Example of Custom Locale Update
Before Version 2.0.0:
class MyCustomMessages implements Messages {
@override
String prefixAgo() => '';
@override
String suffixAgo() => 'ago';
// Other methods...
}
After Version 2.0.0:
class MyCustomMessages implements Messages {
@override
String prefixAgo() => '';
@override
String suffixAgo() => 'ago';
@override
String justNow(int seconds) => 'just now'; // Added for recent events
// Other methods...
}
Try It Out: Live Demo
Experience the live demo of get_time_ago
to see the relative timestamps in action.
Getting Started: Installation
Follow these simple steps to install get_time_ago
in your Flutter project:
- Open your
pubspec.yaml
file. - Add the following dependency:
dependencies:
get_time_ago: ^2.0.0
- Run this command in your terminal:
flutter pub get
Using get_time_ago
in Your App
Once the package is installed, using it to display relative time is easy. Below is an example of how you can convert a DateTime
object into a "time ago" string.
Basic Example
import 'package:get_time_ago/get_time_ago.dart';
void main() {
var dateTime = DateTime.now().subtract(Duration(minutes: 10));
print(GetTimeAgo.parse(dateTime)); // Output: "10 minutes ago"
}
Formatting a String as get_time_ago
If you have a timestamp stored as a string, convert it to DateTime
before formatting:
import 'package:get_time_ago/get_time_ago.dart';
void main() {
var timestamp = '2023-09-25 10:30:00';
var convertedTimestamp = DateTime.parse(timestamp);
print(GetTimeAgo.parse(convertedTimestamp)); // Output: "a day ago"
}
Customizing Messages and Locales
Want to tweak how the relative time is presented? You can implement the Messages
interface to fully customize the output.
Example of Custom Messages
class CustomMessages implements Messages {
@override
String prefixAgo() => '';
@override
String suffixAgo() => 'ago';
@override
String justNow(int seconds) => 'just now';
@override
String secsAgo(int seconds) => '$seconds seconds';
@override
String minAgo(int minutes) => 'a minute';
@override
String minsAgo(int minutes) => '$minutes minutes';
@override
String hourAgo(int minutes) => 'an hour';
@override
String hoursAgo(int hours) => '$hours hours';
@override
String dayAgo(int hours) => 'a day';
@override
String daysAgo(int days) => '$days days';
@override
String wordSeparator() => ' ';
}
To apply these custom messages globally in your app, use the following method:
GetTimeAgo.setCustomLocaleMessages('en', CustomMessages());
Setting a Default Locale
If your app supports multiple languages, you can set a default locale for the entire app.
void main() {
GetTimeAgo.setDefaultLocale('fr'); // Sets French as the default locale
}
Multi-Language Support
The get_time_ago
package supports several languages, including:
- Arabic
- English
- Spanish
- Persian (Farsi)
- French
- Hindi
- Portuguese (Brazil and Brazil alternate)
- Chinese (Simplified and Traditional)
- Japanese
- Occitan
- Korean
- German
- Indonesian
- Turkish
- Urdu
- Vietnamese
- Romanian
To use a specific locale, pass the locale code to the parse
method:
var dateTime = DateTime.now().subtract(Duration(hours: 5));
print(GetTimeAgo.parse(dateTime, locale: 'es')); // Output: "hace 5 horas"
Conclusion
The get_time_ago
package is an excellent solution for displaying human-readable relative timestamps in Flutter apps. Its versatility with multiple time units and language support makes it a must-have for creating more engaging user experiences.
Whether you're building a social media app, a news feed, or a chat platform, get_time_ago
ensures your users will always have up-to-date information about when an event took place.
Ready to Get Started?
Install the get_time_ago
package today and start displaying user-friendly time information in your app. With its easy setup and flexible customization options, you'll be able to enhance your app's time-related functionalities in no time!
Contributing to get_time_ago
Have ideas for improving the package? Want to add support for more languages? Contributions are always welcome! Submit your pull requests on GitHub.
🔗 Get Started Today!
You can find the get_time_ago
package on Pub.dev: get_time_ago
🌟 Join the Community!
Contribute, share feedback, and help improve get_time_ago
. Let's work together to build better Flutter experiences.
Top comments (0)