【Flutter/Dart】FlutterでJSONを使ってAPIのやり取りのテスト実装をする

概要

アプリを開発する時、特にAPI通信を行う時などにJSONデータをやり取りすることはよくある。
そこで、一旦データが正常かどうかとか、仮のデータでテストしたい場合はローカルでJSONフファイルを用意して動作確認をしたい時の方法を記す。

ソースコード

assets:
    - json/

libディレクトリと同じ階層に「json」という名前のディレクトリを作成し、
その中にJSONファイルを生成する。

例として、以下のようなJSONファイルを格納した。

{
    "id": 0,
    "place_name": "アッピア本店",
    "address": "東京都港区南麻布4-11-35 インペリアル広尾 B101",
    "url": "https://tabelog.com/tokyo/A1307/A130703/13001593/",
    "register_at": "2025-05-25 00:00:00",
    "update_at": "2025-05-25 00:00:00"
}

以下はJSONファイルを格納したいレスポンス用のクラスと、
JSONデータからレスポンス用クラスに格納するための処理になる。

class PlaceEntity {
  final int id;
  final String placeName;
  final String address;
  final String url;
  final DateTime registerAt;
  final DateTime updateAt;

  PlaceEntity(
      {required this.id,
      required this.placeName,
      required this.address,
      required this.url,
      required this.registerAt,
      required this.updateAt});

  factory PlaceEntity.fromData(dynamic data) {
    final int id = data['id'];
    final String placeName = data['place_name'];
    final String address = data['address'];
    final String url = data['url'];
    final DateTime registerAt = DateTime.parse(data['register_at']);
    final DateTime updateAt = DateTime.parse(data['update_at']);

    final model = PlaceEntity(
        id: id,
        placeName: placeName,
        address: address,
        url: url,
        registerAt: registerAt,
        updateAt: updateAt);

    return model;
  }
}

// こちらはclassの外部に記載するimport部分
import 'package:flutter/services.dart' show rootBundle;
import 'dart:convert';


// こちらはメンバ変数になる。
String _dummy = "";

// こちらはメソッド内の処理になる。
try {
    String dummy = await rootBundle.loadString("json/dummy.json");
    final response = json.decode(dummy);
    response
      .forEach((key, value) => _dummy = _dummy + '$key: $value \x0A');
    final model = response.fromData(data);
    return models;
} on Exception catch (exception) {
    throw Exception(exception);
}

デモ動画

詳細

手順としては以下の通りになる。

pubspec.yamlのassetに追加する。

JSONファイルを使う場合、assetのところに追加する。
まずはこれでJSONファイルはここにあるという宣言をしておく。

JSONファイルを格納する

JSONファイルを格納する場所はjsonという名前のディレクトリの直下に置かないとエラーになることに注意。
そして、「json」ディレクトリはlibディレクトリと同じ階層に作成する必要がある。

assetでの設定次第では別の場所にも書けると思うが、今回はそこまでする必要がないため、この程度にしておく。

取得したJSONデータを自分で作成したクラスの変数に格納する

まずはJSONデータを取得する。それは以下の部分だ。
ただ、servicesを追加しておく必要がある。

String dummy = await rootBundle.loadString("json/dummy_place.json");

レスポンス用のクラスにfromsJSONという名前のメソッドでJSONデータを変数に格納する処理をあらかじめ作成しておく。そこがJSONデータの変換部分だ。

factory PlaceEntity.fromData(dynamic data) {
    final int id = data['id'];
    final String placeName = data['place_name'];
    final String address = data['address'];
    final String url = data['url'];
    final DateTime registerAt = DateTime.parse(data['register_at']);
    final DateTime updateAt = DateTime.parse(data['update_at']);

    final model = FavoritePlaceEntity(
        id: id,
        placeName: placeName,
        address: address,
        url: url,
        registerAt: registerAt,
        updateAt: updateAt);
    return model;
}

そして、取得したJSONデータは以下の処理で変換する。

final response = json.decode(dummy);
response
    .forEach((key, value) => _dummy = _dummy + '$key: $value \x0A');
final model = response.fromData(data);

参考ページ

Flutterに戻る

目次

概要