이번에는 flutter에서 "며칠 전", "몇 분 전"등 현재 시간과의 차이로 표시합니다.

현재 시각보다 「~일 전」 「~분 전」의 시간을 들여와 화면에 표시한다

소스 코드

main.dart

// 現在の時刻
final DateTime now = DateTime.now();

class Date extends StatelessWidget {
  // 30秒前の時刻
  final DateTime thirtySecondsAgo = now.add(Duration(seconds: 30) * -1);
  // 30分前の時刻
  final DateTime thirtyMinutesAgo = now.add(Duration(minutes: 30) * -1);
  // 5時間前の時刻
  final DateTime fiveHoursAgo = now.add(Duration(hours: 30) * -1);
  // 30日前の時刻
  final DateTime thirtyDaysAgo = now.add(Duration(days: 30) * -1);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: <
            Widget[
          // ⓵
          Text(DateFormat('yyyy/MM/dd(E) HH:mm:ss').format(now)),
          // ②
          Text(DateFormat('yyyy/MM/dd(E) HH:mm:ss').format(thirtySecondsAgo)),
          // ③
          Text(DateFormat('yyyy/MM/dd(E) HH:mm:ss').format(thirtyMinutesAgo)),
          // ④
          Text(DateFormat('yyyy/MM/dd(E) HH:mm:ss').format(fiveHoursAgo)),
          // ⑤
          Text(DateFormat('yyyy/MM/dd(E) HH:mm:ss').format(thirtyDaysAgo)),
        ]),
      ),
    );
  }
}

실제 화면이 여기


일단 여기까지 사용한 기술 소개

DateTime.add()

Flutter의 DateTime 클래스 에는, add 라고 하는 메소드가 준비되어 있어 이것을 이용해 지정한 기간, 전 또는 후의 시각 (DateTime)을 취해 이것이다.

예를 들어, 30초 후에라면 다음과 같이 하면 가져올 수 있습니다.
final thirtySecondsAfter = DateTime.add(Duration(seconds: 30))
add의 인수에 Duration 를 건네주면 간단하게 에 이것입니다.

Flutter의 공식 문서 "DateTime class"
htps : // 아피. fぅ r. 그리고 v/fぅ는 r/다 rt-이것/다테치메-cぁs. HTML

DateTime을 포맷으로 String으로 변환

우선은, 부 b. 에서 v 로부터 intl 라고 하는 라이브러리를 사용할 수 있도록(듯이) 합니다.

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.16.1

main.dart

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

이제 intl을 사용할 수 있습니다.

그런 다음 형식을 지정하여 String으로 변환합니다.

예: DateFormat('yyyy/MM/dd(E)').format(DateTime date)
· 이와 같이 DataFormat의 인수로 지정하는 Format를 건네줍니다.
　　　　　　　⬇️
・format의 인수에 String로 변환하고 싶은 시각(DateTime)을 건네준다
　　　　　　　⬇️
· 이것을 Text의 인수에 건네주면 표시할 수 있다

참고한 기사
· pub.dev의 intl 패키지
htps // 푸 b. v / pac 가게 s / in tl
·flutter로 DateTime과 String의 변환 방법과 TimeZone과 Locale
htps : // 코 m / 코 2 c / ms / bd0d20d72c66 8231c5c

현재 시간과의 차이를 표시합니다.

소스 코드

main.dart

final DateTime now = DateTime.now();

class Date extends StatelessWidget {
  final List<DateTime> dates = [
    // 30秒前の時刻
    now.add(Duration(seconds: 30) * -1),
    // 30分前の時刻
    now.add(Duration(minutes: 30) * -1),
    // 5時間前
    now.add(Duration(hours: 30) * -1),
    // 30日前
    now.add(Duration(days: 30) * -1)
  ];

  @override
  Widget build(BuildContext context) {
    final difference = dates.map((date) => Text(fromAtNow(date))).toList();
    return Scaffold(
      body: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center, children: difference),
      ),
    );
  }
}

String fromAtNow(DateTime date) {
  final Duration difference = DateTime.now().difference(date);
  final int sec = difference.inSeconds;

  if (sec >= 60 * 60 * 24) {
    return '${difference.inDays.toString()}日前';
  } else if (sec >= 60 * 60) {
    return '${difference.inHours.toString()}時間前';
  } else if (sec >= 60) {
    return '${difference.inMinutes.toString()}分前';
  } else {
    return '$sec秒前';
  }
}

실제 화면

이 방법을 설명

실제로 여기 부분에서 현재 시간과의 차이를 문자열로 변환합니다.

String fromAtNow(DateTime date) {
  final Duration difference = DateTime.now().difference(date);
  final int sec = difference.inSeconds;

  if (sec >= 60 * 60 * 24) {
    return '${difference.inDays.toString()}日前';
  } else if (sec >= 60 * 60) {
    return '${difference.inHours.toString()}時間前';
  } else if (sec >= 60) {
    return '${difference.inMinutes.toString()}分前';
  } else {
    return '$sec秒前';
  }
}

절차

1. 우선, DateTime 클래스의 difference 메소드를 사용해 차분을 Duration으로 돌려줍니다.
이 예에서는 DataTime.now와 date의 차이를 취했습니다.

예 : final Duration difference = DateTime.now().difference(date);
2. Duration의 inSeconds 메소드로 차분(Duration)을 초수(int)로 변환해 준다

예 : final int sec = difference.inSeconds;
3. 60초 이하의 경우는 ~초 전과 같이 경우 나누기

예 : if(sec < 60) {return '$sec秒前';}
이상! !

유용한 기사

Flutter 공식 문서 "DateTime class"
htps : // 아피. fぅ r. 그리고 v/fぅ는 r/다 rt-이것/다테치메-cぁs. HTML
· pub.dev의 intl 패키지
htps // 푸 b. v / pac 가게 s / in tl
·flutter로 DateTime과 String의 변환 방법과 TimeZone과 Locale
htps : // 코 m / 코 2 c / ms / bd0d20d72c66 8231c5c
· 일주일 전, 또는 현재 일시부터 n일 후, n일 전의 날짜를 취득한다 - C# 프로그래밍
htps //w w.ぺん c. 코 m / 도쿠 멘 t / c 샤 rp 게 t 어우 ㅇ k 턱 갓