🐱

Flutter 自作クラスをfreezedで利用する

2023/06/24に公開

Flutterでfreezedを利用した複数プロパティを持った自作クラスのサンプルが少なかったので書いてみました。

freezedをインストールします。
※下記インストールコマンドはリンクのオフィシャルのインストール手順を参考にしてます。

flutter pub add freezed_annotation
flutter pub add --dev build_runner
flutter pub add --dev freezed
# if using freezed to generate fromJson/toJson, also add:
flutter pub add json_annotation
flutter pub add --dev json_serializable

lib/shop.dartに以下のコードを書きます。

import 'package:freezed_annotation/freezed_annotation.dart';

part 'shop.freezed.dart';
part 'shop.g.dart';

@freezed
class Shop with _$Shop {
  factory Shop({
    required int id,
    required String shopName,
    String? address,
    @ShopCustomerConverter() final List<ShopCustomer>? shopCustomers,
  }) = _Shop;

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

@freezed
class ShopCustomer with _$ShopCustomer {
  factory ShopCustomer({
    required int id,
    required String name,
  }) = _ShopCustomer;

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

class ShopCustomerConverter
    implements JsonConverter<ShopCustomer, Map<String, dynamic>> {
  const ShopCustomerConverter();

  @override
  ShopCustomer fromJson(Map<String, dynamic> json) {
    return ShopCustomer.fromJson(json);
  }

  @override
  Map<String, dynamic> toJson(ShopCustomer data) => data.toJson();
}

下記コマンドでshop.freezed.dartshop.g.dartを作成します。

flutter pub run build_runner build

確認用にUnitテストコードを作成します。
test/shop_test.dartに以下のコードを書きます。
[your project]は使用しているプロジェクト名に変えてください。

import 'package:flutter_test/flutter_test.dart';
import 'package:[your project]/shop.dart';

void main() {
  test('shop test', () {
    final ShopCustomer customer1 = ShopCustomer(id: 1, name: 'customer 1');
    final ShopCustomer customer2 = ShopCustomer(id: 2, name: 'customer 2');
    final Shop shop = Shop(
        id: 200,
        shopName: 'shop1',
        address: 'tokyo',
        shopCustomers: [customer1, customer2]);
    print('@shop');
    print(shop);
    print('@shop.toJson()');
    print(shop.toJson());
    expect(true, true);
  });
}

テスト実行

flutter test test/shop_test.dart 

テスト実行結果

00:01 +0: shop test                                                           
@shop
Shop(id: 200, shopName: shop1, address: tokyo, shopCustomers: [ShopCustomer(id: 1, name: customer 1), ShopCustomer(id: 2, name: customer 2)])
@shop.toJson()
{id: 200, shopName: shop1, address: tokyo, shopCustomers: [{id: 1, name: customer 1}, {id: 2, name: customer 2}]}
00:01 +1: All tests passed!  

自作クラスのShopCustomerが出力されていることを確認できます。

Discussion