【Flutter】FlutterJsonBeanFactoryがとても便利という話

インドネシアの[PT.AQ Business Consulting Indonesia](https://aqi.co.id/)でFlutterのエンジニア兼アドバイザーをしております菊池と申します。

Zennで本を出版しております[flutter chips](https://zenn.dev/tetsukick/books/06ee607e30e243)(30,000字程度)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/5183aafc-d1d7-534f-f618-031f10790fdc.png)

## FlutterJsonBeanFactoryとは
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/d1b52181-fefe-1141-e570-5fa8e81ec090.png)
[FlutterJsonBeanFactory](https://plugins.jetbrains.com/plugin/11415-flutterjsonbeanfactory-only-null-safety-)とは、AndroidStudio用のプラグインで、Json形式のテキストを貼り付けるだけで、
Objectのクラスとパース用の関数を自動生成してくれるプラグインです。

## プラグインのインストール方法
AndroidStudioのMenuからPreferencesを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/bc9a6b07-0b69-64e9-394f-bdce5b9363dd.png)

サイドメニューのプラグインを選択して「FlutterJsonBeanFactory」で検索し、インストール。
インストール後、AndroidStudioを再起動させてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/fc0e7d2f-d5ac-8144-4244-84fa4f8e69bf.png)

## 使い方
ファイルを生成するディレクトリで右クリックして、New > JsonToBeanDartAction を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/94d315ab-d92b-7493-31d8-b33f160427b9.png)

クラス名とjsonデータの入力ダイアログが開くので、クラス名とjsonデータを貼り付ける
クラス名: 生成時に語尾にEntityが付与されます。例: SampleResponse → SampleResponseEntity
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/5a7afc15-9a2d-46f3-d9c9-b0599a9377da.png)

すると以下の２ファイルが生成されます。

```sample_response_entity.dart

import 'dart:convert';
import 'package:sample/generated/json/base/json_field.dart';
import 'package:sample/generated/json/sample_response_entity.g.dart';

@JsonSerializable()
class SampleResponseEntity {

	String? status;
	dynamic? result;
  
  SampleResponseEntity();

  factory SampleResponseEntity.fromJson(Map<String, dynamic> json) => $SampleResponseEntityFromJson(json);

  Map<String, dynamic> toJson() => $SampleResponseEntityToJson(this);

  @override
  String toString() {
    return jsonEncode(this);
  }
}

```

```sample_response_entity.g.dart
import 'package:sample/generated/json/base/json_convert_content.dart';
import 'package:sample/models/entity/sample_response_entity.dart';

SampleResponseEntity $SampleResponseEntityFromJson(Map<String, dynamic> json) {
	SampleResponseEntity sampleResponseEntity = SampleResponseEntity();
	var status = jsonConvert.convert<String>(json['status']);
	if (status != null) {
		sampleResponseEntity.status = status;
	}
	var result = jsonConvert.convert<dynamic>(json['result']);
	if (result != null) {
		sampleResponseEntity.result = result;
	}
	return sampleResponseEntity;
}

Map<String, dynamic> $SampleResponseEntityToJson(SampleResponseEntity entity) {
	final Map<String, dynamic> data = <String, dynamic>{};
	data['status'] = entity.status;
	data['result'] = entity.result;
	return data;
}
```

## 実際の利用方法

以下のようにして、APIのレスポンスのjsonデータをObjectにパースします。

```main.dart
final responseEntity = SampleResponseEntity.fromJson(response.data);
```

## 参考文献

https://plugins.jetbrains.com/plugin/11415-flutterjsonbeanfactory-only-null-safety-

https://github.com/fluttercandies/FlutterJsonBeanFactory