【flutter】サーバー側API未実装時にダミーデータを使ってフロントエンドのUI開発を進める方法

はじめに

Flutterでのアプリ開発では、バックエンドのAPIが完成する前にフロントエンドのUIを先に進めたい場合がよくある。この記事では、サーバー側のAPIが実装されていない間に、Flutterアプリでダミーデータを使って開発を進める方法を記載。

JSONダミーデータをfakesクラスで用意

まず、Freezedアノテーションを使用してUserクラスを定義し、JSONからデータを生成するためのコードをFreezedで生成する。
このコードは、freezed パッケージによって生成されたコードを含む。そのため、flutter pub run build_runner build コマンドを実行して、関連するファイルを生成する必要がある。

import 'package:freezed_annotation/freezed_annotation.dart';

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

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

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

次に、実際のAPIレスポンスを模倣したJSONダミーデータをfakesクラスで用意。

Fakes クラスは、Flutterで使用されるダミーデータを生成するためのユーティリティクラス。

Fakeクラスに関する公式ドキュメントはこちら。

Fake class - test_api.fake library - Dart API

fakes クラスを使用するためにインストールは必要ない。fakes クラスは、下記のようにプロジェクト内に自分で定義して、その中に静的なダミーデータリストを用意する。

続きは、こちらで記載しています。

【flutter】サーバー側API未実装時にダミーデータを使ってフロントエンドのUI開発を進める方法