[Flutter] json_serializable 사용하기

[Flutter] json_serializable 사용하기

문제

flutter 에서 json 데이터를 사용하기 위해서는 이를 Map 으로 변경해서 사용해야 합니다.

json을 객체로 변경하기 위해 fromJson, 객체를 json으로 변경하기 위해 toJson 함수를 만들어서 사용합니다.

class User {
  final String name;
  final String email;

  User(this.name, this.email);

  User.fromJson(Map<String, dynamic> json)
      : name = json['name'],
        email = json['email'];

  Map<String, dynamic> toJson() =>
    {
      'name': name,
      'email': email,
    };
}

이 때 문제점은 내부 변수가 변경되거나, 추가, 삭제 되면 해당 함수들을 모두 수정해 주어야 합니다.

해결

이러한 수정을 자동으로 하기 위해 json_serializble을 사용합니다.

• https://pub.dev/packages/json_serializable

model 클래스 수정

1. import 구문 추가
2. part 구문 추가
3. @JsonSerializable() 추가
4. fromJson 추가
5. toJson 추가

import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart';

@JsonSerializable()
class User {
  User(this.name, this.email);

  String name;
  String email;

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

pubspec.yaml 수정

패키지를 dev_dependencies 에 추가해 줍니다.

1. build_runner 추가
2. json_serializable 추가

dev_dependencies:
  flutter_test:
    sdk: flutter

  build_runner: ^1.0.0
  json_serializable: ^3.0.0

코드 생성 명령어 실행

명령어를 실행하면 part 로 지정한 파일이 생성됩니다.

1회 생성

$ flutter pub run build_runner build

[INFO] Generating build script...
[INFO] Generating build script completed, took 830ms

[INFO] Initializing inputs
[INFO] Reading cached asset graph...
[INFO] Reading cached asset graph completed, took 128ms

[INFO] Checking for updates since last build...
[INFO] Checking for updates since last build completed, took 1.3s

[INFO] Running build...
[INFO] 1.1s elapsed, 0/10 actions completed.
[INFO] 2.1s elapsed, 0/10 actions completed.
[INFO] 3.8s elapsed, 0/10 actions completed.
[INFO] 6.1s elapsed, 2/10 actions completed.
[INFO] 9.9s elapsed, 2/10 actions completed.
[INFO] 12.2s elapsed, 3/10 actions completed.
[INFO] Running build completed, took 12.8s

[INFO] Caching finalized dependency graph...
[INFO] Caching finalized dependency graph completed, took 69ms

[INFO] Succeeded after 12.9s with 2 outputs (11 actions)

계속 생성

$ flutter pub run build_runner watch

참고

• https://pub.dev/packages/json_serializable
• https://flutter.dev/docs/development/data-and-backend/json
• https://flutter-academy.com/work-with-json-in-flutter-part-2-json-serializable/