背景

電車の時刻表のように日時が配列形式でズラーっと並んでいるようなJSONをAPIから取得する画面を実装していました。
その際に、ブラウザ上でAPIを叩いた時とFlutter側で画面表示した際の日時にズレが生じていることに気付きました。

あ、Flutter側で受け取るタイミングでDateTimeがUTC形式に変換されてるっぽい。
23日5時が22日20時になってる。
— うめちゃん (@umechanhika) 2019年7月23日

原因

json_serializableで日付をシリアライズすると内部ではDateTime.parse(String formattedString)が呼ばれます。
このparseメソッドですが、実装を見てみるとタイムゾーンがUTC以外の場合にはUTC形式に変換するような処理が入っていました。

date_time.dart（一部抜粋）

static DateTime parse(String formattedString) {
  // 省略

  if (match[8] != null) {
    // timezone part
    isUtc = true; 
    if (match[9] != null) {
      // timezone other than 'Z' and 'z'.
      int sign = (match[9] == '-') ? -1 : 1;
      int hourDifference = int.parse(match[10]);
      int minuteDifference = parseIntOrZero(match[11]);
      minuteDifference += 60 * hourDifference;
      minute -= sign * minuteDifference;
    }
  }

  // 省略
}

DateTime.parseのコメント。
英語に自信がないけど、UTC以外のタイムゾーンを指定していた場合も、UTCに変換されるってことかな？ pic.twitter.com/1ycvJy9HsV
— うめちゃん (@umechanhika) 2019年7月23日

https://t.co/uGnrQ1JuwD
タイムゾーンオフセットのパースには対応しているけど、データはUTCになるよってことか。
— うめちゃん (@umechanhika) 2019年7月23日

対応

json_serializableではシリアライズ処理に独自メソッドを指定することができるので、一度シリアライズされたDateTimeを端末ローカルのタイムゾーンに変換するように修正したところ、UTCからJSTに変換することができました。

sample_data.dart

@JsonSerializable()
class SampleData {
  @JsonKey(fromJson: parseDateTime)
  final DateTime dateTime;

  static parseDateTime(dynamic value) => DateTime.parse(value as String).toLocal();
}

【Flutter(Dart)】json_serializableで日付をシリアライズするとJSTがUTCに変換される

背景

原因

対応