🛰️

日付の差分を求めるにはdifference methodを使う

2024/03/11に公開

Flutter

Dart

tech

Tips💡

SNSでよく見る何日前という表示を作りたい場面があった。日付の差分を求めるにはdifference methodを使う必要があるらしい。

Returns a Duration with the difference when subtracting other from this.

The returned Duration will be negative if other occurs after this.

this から other を引いた差の Duration を返します。

other が this より後に発生した場合、返される Duration は負の値になります。

final berlinWallFell = DateTime.utc(1989, DateTime.november, 9);
final dDay = DateTime.utc(1944, DateTime.june, 6);

final difference = berlinWallFell.difference(dDay);
print(difference.inDays); // 16592

今回はこの機能を使って、それぽいUIを作ってみた。モックですが参考までにどうぞ

ソースコード:

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

class NotificationPage extends HookConsumerWidget {
  const NotificationPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final specifiedDate = DateTime(2023, 3);
    final now = DateTime.now();
    // differenceメソッドで日付の差分を取得
    final daysDifference = now.difference(specifiedDate).inDays;
    // 表示用のテキストを作成
    final displayText = daysDifference;

    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: [
            const Text('通知', style: TextStyle(fontSize: 20)),
            Container(
              width: double.infinity,
              height: 100,
              // 角丸にする
              margin: const EdgeInsets.all(15),
              child: Card(
                child: Material(
                  color: const Color(0xFFFFFFFF),
                  child: Row(
                    children: [
                      const SizedBox(
                        width: 10,
                      ),
                      const Icon(
                        size: 40,
                        Icons.account_circle,
                        color: Color(0xFFA9A9A9),
                      ),
                      const SizedBox(
                        width: 3,
                      ),
                      Flexible(
                        child: RichText(
                          text: TextSpan(
                            style: DefaultTextStyle.of(context).style,
                            children: <TextSpan>[
                              const TextSpan(text: 'Pondeさんがあなたをフォローしました。'),
                              TextSpan(
                                text: ' $displayText日前',
                                style: const TextStyle(color: Colors.grey),
                              ),
                            ],
                          ),
                        ),
                      ),
                      const SizedBox(
                        width: 2,
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

最後に

何日前の時間を表示したいが、Rowだといい感じでできない???
テキストの末尾に何日前と表示するには、TichText classを使用する必要がありました。UIのLayout整えるも難しいですね。

Tips💡

最後に

Discussion