🥌

Flutter Json Object Mapper

생성일

2021/05/11 16:04

태그

Flutter

속성

Dependency

https://pub.dev/packages/dart_json_mapper 를 사용한다

flutter pub add dart_json_mapper
Bash
복사

pubspec.yaml 파일에 build_runner를 추가합니다.

...
dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
	...
  dart_json_mapper: ^2.1.17

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner: 👈👈👈👈👈👈👈👈👈 이 부분이 추가되어야 합니다.
YAML
복사

그리고 `flutter pub get` 명령어로 dependency 설치를 진행합니다.

build.yaml 생성

flutter root 디렉토리에 build.yaml 파일을 생성하고 아래 내용을 붙여넣는다.

targets:
  $default:
    builders:
      dart_json_mapper:
          generate_for:
          # here should be listed entry point files having 'void main()' function
            - lib/main.dart 👈👈👈👈👈👈 main() 함수가 있는 파일 path를 정확하게 적어야 합니다 

      # This part is needed to tell original reflectable builder to stay away
      # it overrides default options for reflectable builder to an **empty** set of files
      reflectable:
        generate_for:
          - no/files
YAML
복사

그리고 아래의 명령어를 입력한다

flutter pub run build_runner watch --delete-conflicting-outputs
Bash
복사

위 명령어는 flutter 프로젝트를 저장하면 실행되며, *.dart 파일을 탐색 후 @jsonSerializable 어노테이션이 붙은 클래스들을 찾아서 main.mapper.g.dart 파일을 생성해준다. 책상 앞에 코딩 준비를 마치고 위 스크립트를 실행해주자.

fyi) reflection이 각 언어에서 가장 유용하게 사용되는 부분은 json을 object 로 mapping 할 때 사용됩니다. 그리고 dart 는 reflection이 지원되지 않습니다. 안되는데 왜 여기서 이야기 하느냐?

안되면 되게 하는게 엔지니어죠.. @jsonSerializaiton 이라는 어노테이션을 만들고 prebuild 시점에 스크립트를 통해서 reflection 처럼 사용할 수 있는 프로퍼티들을 강제 주입하는 방식으로 reflection 을 흉내냈습니다.

작업이 완료된다. 터미널 프로세스는 자동 종료되지 않으니 [INFO] Succeeded after 15.6s with 1 outputs (1 actions) 문구가 나오면 Ctrl+C 로 프로세스를 종료시킨다

Android Studio 로 돌아와서 Directory를 보면 main.mapper.g.dart 파일이 생성된 것을 볼 수 있다.

그 후 main() 함수가 있는 main.dart 파일에서 initializeJsonMapper() 함수를 실행해주는 코드를 추가합니다.

void main() async {
  Constants.setEnvironment(Environment.STAGING);
  WidgetsFlutterBinding.ensureInitialized();
  initializeJsonMapper(); 👈👈👈👈 
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(App());
}
Dart
복사

Trouble Shooting

_memberSymbolMap is not assined

~.mapper.g.dart 파일은 생성되었지만 내부 _memberSymbolMap, _data 변수가 제대로 선언되지 않아 컴파일 에러가 발생했고 이를 해결했습니다.

void main() {} 함수가 있는 파일에

import 'package:reflectable/reflectable.dart';

위 코드 추가가 필요합니다. 사용하지 않는 import지만

flutter pub run build_runner watch --delete-conflicting-outputs
Bash
복사

위 명령어가 정상적으로 수행되기 위해서는 위 import 구문을 넣어줘야 정상적으로 동작함을 확인했습니다.

^ 위 이슈는 json_dart_mapper 최신버전에서 수정되었습니다.

정신나간 Unhandled Exception: Bad state: Reflectable has not been initialized. 이슈

void main() 함수가 있는 곳에 @JsonSerializable()을 사용했던 파일을 수작업으로 import 해줘야합니다.

그 후 터미널에서

flutter pub run build_runner build --delete-conflicting-outputs
Bash
복사

명령어를 실행하고 ~.mapper.g.dart 파일을 보면 파일 내용(?) 이 많아진 것을 확인할 수 있고,

이 상태에서 flutter 앱 실행시 정상 수행됨을 확인할 수 있습니다.

API Response 실무 예제

개인 프로젝트에서 사용하던 API Response Format 은 소개한적 있습니다. Flutter 에서도 당연히 동일한 format을 따를 예정입니다.

ResponseFormat.dart

import 'package:dart_json_mapper/dart_json_mapper.dart';

@jsonSerializable
class ResponseJSON<T> {
  final ResponseHeader header;
  final T data;

  ResponseJSON({
    this.header,
    this.data
  });

  factory ResponseJSON.fromJson(Map<String, dynamic> json, Function(Map<String, dynamic>) fromJson) {
    return ResponseJSON(
      header: ResponseHeader.fromJson(json['header']),
      data: fromJson(json['data']),
    );
  }
} // Single Object 타입의 Response를 파싱하기 위한 Response Format

@jsonSerializable
class ResponseListJSON<T> {
  final ResponseHeader header;
  final List<T> data;

  ResponseListJSON({
    this.header,
    this.data
  });

  factory ResponseListJSON.fromJson(Map<String, dynamic> json, Function(Map<String, dynamic>) fromJson) {
    List<T> list = List<T>.from(json['data'].map((model) => fromJson(model)));

    return ResponseListJSON(
      header: ResponseHeader.fromJson(json['header']),
      data: list,
    );
  }
} // List 타입의 Response를 파싱하기 위한 Response Format
Dart
복사

Promotion.dart

import 'package:dart_json_mapper/dart_json_mapper.dart';

@jsonSerializable
class Promotion {
  final String brandName;
  final String brandLogoURL;
  final int boltPrice;
  final int boltEffectiveness;
  final int discountRate;
  final int priceMax;
  final int discountMax;
  final String description;

  Promotion({
    this.brandName,
    this.brandLogoURL,
    this.boltPrice,
    this.boltEffectiveness,
    this.discountRate,
    this.priceMax,
    this.discountMax,
    this.description
  });

  factory Promotion.fromJson(Map<String, dynamic> json) {
    return Promotion(
      brandName: json['brandName'],
      brandLogoURL: json["brandLogoURL"],
      boltPrice: json["boltPrice"],
      boltEffectiveness: json['boltEffectiveness'],
      discountRate: json['discountRate'],
      priceMax: json['priceMax'],
      discountMax: json['discountMax'],
      description: json['description'],
    );
  }
}
Dart
복사

위 코드를 모두 작성 한 후 아래 2개 중 1개를 사용하면 됩니다.

flutter pub run build_runner watch --delete-conflicting-outputs
Dart
복사

파일 변경시 자동으로 main.mapper.g.dart 파일을 업데이트합니다.

flutter pub run build_runner build --delete-conflicting-outputs
Dart
복사

수동으로 업데이트 합니다.

PromotionProvider.dart

import 'dart:convert';
import 'package:chai_booster/Entity/Promotion.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class PromotionProvider with ChangeNotifier {
  List<Promotion> promotion = [];

  final client = http.Client();

  // Action
  void fetchPromotions() async {
    final response = await client.get(Uri.parse('http://localhost:5001/chai-booster/asia-northeast3/api/booster/v1/promotions'));
    final data = ResponseListJSON<Promotion>.fromJson(json.decode(response.body), (data) => Promotion.fromJson(data)).data;
    promotion = data;
    notifyListeners();
  }
}
Dart
복사

^ 위 코드에서 눈여겨봐야할 부분은 14번째 라인

final data = ResponseListJSON<Promotion>.fromJson(json.decode(response.body), (data) => Promotion.fromJson(data)).data;
Dart
복사

위와 같이 사용하면 data 에 Promotion 배열이 깔끔하게 떨어진다.

끝.