flutterでapiリクエスト(json形式)する際のdataを、freezedを使用して生成することにしたので、メモ書きとして残します。

今回、freezedで生成する対象は前回のログインアプリのリクエスト/レスポンスに使っていたデータクラスになります。
https://qiita.com/yufuku/items/a7ddcb13ede86df6459a

環境

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.5.3, on macOS 11.2.3 20D91 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.62.3)

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

まず、使用するパッケージをインストールします。

flutter pub add freezed
flutter pub add freezed_annotation
flutter pub add json_serializable
flutter pub add json_annotation
flutter pub add build_runner

実装

今回は既にapiリクエスト/レスポンスをするために既に作成していたデータクラスをfreezedで作り直そうと思います。
まず、freezed適用前のコードは下記になります。

lib/requester/requester.dart

class AuthRequest {
  final String name;
  final String password;

  AuthRequest({
    this.name = "",
    this.password = "",
  });

  Map<String, dynamic> toJson() => {
        'password': password,
        'user_name': name,
      };
}

class AuthResponse {
  final String accessToken;
  final String refreshToken;

  AuthResponse.fromJson(Map<String, dynamic> json)
      : accessToken = json['access_token'],
        refreshToken = json['refresh_token'];
}

それぞれ、toJson/fromJsonを持ったクラスとなります。
これを元にfreezed用に書き換えたコードが下記になります。

lib/data/auth/auth.dart

import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:flutter/foundation.dart';

part 'auth.freezed.dart';
part 'auth.g.dart';

@freezed
class AuthRequest with _$AuthRequest {
  const factory AuthRequest(
      {@JsonKey(name: 'user_name') required String name,
      @JsonKey(name: 'password') required String password}) = _AuthRequest;

  factory AuthRequest.fromJson(Map<String, dynamic> json) =>
      _$AuthRequestFromJson(json);
}

@freezed
class AuthResponse with _$AuthResponse {
  const factory AuthResponse(
          {@JsonKey(name: 'access_token') required String accessToken,
          @JsonKey(name: 'refresh_token') required String refreshToken}) =
      _AuthResponse;

  factory AuthResponse.fromJson(Map<String, dynamic> json) =>
      _$AuthResponseFromJson(json);
}

まず、partで{ファイル名}.freezed.dartと{ファイル名}.auth.g.dartが必要です。
そして、それぞれのクラスにfreezedのアノテーションをつけます。
fromJsonを定義することで、toJson/fromJsonが自動で生成されます。
@JsonKeyをつけることで、jsonでのラベル名とクラスでの変数名を分けることができます。
@JsonKeyをつけなければ変数名がjsonでのラベル名になります（例えば、AuthRequestのnameだったらjsonでのラベル名をそのままnameになります）。

データクラスの生成

上記のfreezedのコードを元に、{ファイル名}.freezed.dartと{ファイル名}.auth.g.dartを生成するためには下記コマンド実行します。

flutter pub run build_runner build

上記だとファイルを変更した後に毎回コマンドを実行しなければ生成してくれないのですが、下記コマンドを実行状態にしておくと、対象のファイルが保存するたびに自動で生成してくれるようになります。

flutter pub run build_runner watch

おわりに

今回は、freezedでapiリクエストで使用するデータクラスを作成してみました。
toJson/fromJsonなどの記述が楽な反面、ファイルを変更したら毎回コマンドを実行しないといけないので、少し煩わしい感じもあります。

今回作成したコードは下記になります。
https://github.com/fu-yuta/authentication_frontend/tree/freezed_data