Zenn
🔖

【Flutter】SNSでよくみる「~時間前」「~日前」を簡単に実装できるパッケージ(timeago)

2022/03/03に公開
Flutter
Dart
tech

SNSの投稿でよく見られる「~時間前」「~日前」といった表示ができるパッケージを調べたのでメモとして残しておきます。現在の日時から比較したい日時までの日数を計算し、適切に表示してくれる便利なパッケージです。
使い方も簡単でした！

使用する環境

  • Android Studio Bumblebee | 2021.1.1 Patch 1
  • macOS Monterey version12.1

参考にしたサイト

https://pub.dev/packages/timeago

1. パッケージのインストール

下記のリンクからパッケージをインストールしてください。
timeagoパッケージ

2. main.dartに初期設定

main.dart
 import 'package:timeago/timeago.dart' as timeAgo;

 void main() {
+  timeAgo.setLocaleMessages("ja", timeAgo.JaMessages());
   runApp(MyApp());
 }

3. トップレベル関数を作成

timeago.dart
import 'package:timeago/timeago.dart' as timeAgo;

String createTimeAgoString(DateTime postDateTime) {
  final now = DateTime.now();
  final difference = now.difference(postDateTime);
  return timeAgo.format(now.subtract(difference), locale: "ja");
}

このように設定しておくと、createTimeAgoString(比較したい年月日)で呼び出してやると、現在の時刻との差分を返してくれる便利な関数ができました。
表示の仕方も~分前や~時間前などSNS風の表示です。

4. おわりに

SNSのあの表示をどうやったら実装できるのか気になって調べましたが、便利なパッケージがあったのですぐ実装できました！
何かありましたらコメントでご指摘ください🙇🏻‍♂️

Discussion