Flutter에서 JSON 응답을 다루는 방법

이 글에서는 HTTP로 API요청을 하여 받은 응답을 flutter에서 사용하는 방법을 다룹니다.

이전 글(플러터(Flutter) 앱 만들기 : 블로그 글 상세)에서 만든 Post객체를 다시 살펴봅니다.

간단한 객체지만 Post 객체의 응답이 복잡해지거나 변경이 잦은 경우 매번 factory 생성자를 손대기가 쉽지 않습니다.

JSON을 시리얼라이즈 하려면 build_runner와 json_serializable, json_annotation 이 필요합니다. pubspec.yaml 에 추가합니다

http는 테스트용 API를 만들기 위한 패키지입니다.

앞으로 사용할 커맨드 목록입니다.

• flutter pub run build_runner build : 1회 빌드
• flutter pub run build_runner watch : 파일 변경이 발생하면 빌드

api.dart 는 jsonplaceholder에서 글 목록을 가져오고 List<Post> 타입을 가진 리스트에 넣습니다.

post.dart 파일 전체입니다. “post.g.dart” 는 build_runner가 만드는 파일입니다. 터미널에서 `flutter pub run build_runner build`을 실행하세요.

맨 위 라인처럼 자동으로 만드는 코드이니 절대 수정하면 안됩니다.

전체 코드는 https://github.com/ChangJoo-Park/flutter_json_serializable 에 있습니다

vscode 사용자를 위한 내용

“.vscode” 디렉터리에 tasks.json을 아래 내용으로 만들어주세요 build / watch가 편해집니다.

—

모델을 쉽게 만드는 snippet 입니다. fltmdl 을 입력하면 기본 클래스 구조가 만들어집니다.{
"Generate class for new model": {
 "prefix": "fltmdl",
 "body": [
  "import 'package:json_annotation/json_annotation.dart';",
  "",
  "/// 아래 코드는 `${1:Item}` 클래스가 생성된 파일의 private 멤버에 접근하는 것을 허용합니다.",
  "/// 파일 이름은 *.g.dart이며, 여기서 *은 소스 파일 이름을 나타냅니다.",
  "part '${2:item}.g.dart';",
  "",
  "/// 클래스가 시리얼라이저가 필요하다고 알려주는 어노테이션입니다.",
  "@JsonSerializable()",
  "class ${1:Item} {",
  "    ${1:Item}(this.userId, this.id, this.title, this.body);",
  "    int userId;",
  "    int id;",
  "    String title;",
  "    String body;",
  "",
  "    /// map 데이터를 가지고 ${1:Item} 인스턴스를 만드는데 필요한 factory 생성자입니다.",
  "    /// '${1:Item}.g.dart'의 `_$${1:Item}FromJson()` 생성자에 구현이 있습니다.",
  "    factory ${1:Item}.fromJson(Map < String, dynamic > json) => _$${1:Item}FromJson(json);",
  "",
  "    /// `toJson` 은 JSON으로 직렬화할 수 있도록 합니다.",
  "    /// 자동으로 만들어진 ${1:Item}.g.dart에 구현이 있습니다.",
  "    Map < String, dynamic > toJson() => _$${1:Item}ToJson(this);",
  "}",
 ],
 "description": ""
}
}