freezedを用いてjsonファイルを読み込む

概要

flutterにおいて、immutableなクラスを生成したいという事がよくある。この際に有効な方法がfreezedパッケージを用いることである。

https://pub.dev/packages/freezed

このパッケージで生成したimmutableなクラスに対して、ローカル（assetsディレクトリなど）に保存されているjsonファイルを読み込ませる手順を示す。実際には、APIやfirebaseから取得したjsonデータに対して用いることが多いが、今回はテスト用のローカルファイルを読み込むことにした。

手順

1. freezedパッケージをインストール
2. freezedクラスを作成
3. コード生成を行う
4. assetsフォルダにテスト用jsonファイルを作成
5. jsonファイルを読み込む

freezedパッケージをインストール

次のコードを順に実行し、パッケージをインストール

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

freezedクラスを作成

次のテンプレートを適宜変更する。

user.dart

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

part 'user.freezed.dart';
part 'user.g.dart';

@freezed
class User with _$User {
  const User._();
  const factory User({
    required String name,
  }) = _User;

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

コード生成を行う

次のコードを実行すする。

flutter pub run build_runner watch

build_runnerを用いてコード生成を行うコードである。ただし「watch」を付けることによって変更保存時に自動でコード生成をし直すことができる。

assetsフォルダにテスト用jsonファイルを作成

project直下にassetsフォルダを配置し、json -> test_user.jsonを作成する。

test_user.json

{
  "name":"my_name"
}

jsonファイルを読み込む

任意の場所で先程作成したクラスをインスタンス化する。また、ローカルにあるjsonファイルからデータを読み出し、引数に渡す。

  loadFile() async {
    var text = await rootBundle.loadString('assets/json/test_user.json');
    User testUser = User.fromJson(json.decode(text));
    print(testUser.name); // 確認用に表示
  }

jsonファイルがリスト形式の場合は以下のように修正する。

  loadFile() async {
    var jsonData = json.decode(await rootBundle.loadString('assets/json/test_user.json'));
    List<User> testUser =
      jsonData.map((data) => User.fromJson(data)).toList();
    print(testUser[0].name); // 確認用に表示
  }

まとめ

freezedを使えばimmutableのクラスを定義することが可能なため便利である。自分はhook_riverpodsと組み合わせて状態管理を行っている。このような状態管理方法は現在主流な状態管理方法の一つであると考えている。

参考資料