[플러터] JSON 파일을 처리하는 방법

1. 소개

Dart 공식 json_annotation 라이브러리를 이용하여 Flutter 앱으로 쉽게 JSON 파일을 처리할 수 있는 방법을 정리하고 있습니다.

사용할 라이브러리 목록

json_annotation

build_runner

json_serializable

2. JSON 파일

설명을 위해 만든 JSON 파일입니다. 이번은 리스트형의 중첩된 (중첩) 구조로 해 보았습니다.

assets/sample.json

{
    "list": [
        {
            "id": "0",
            "name": "taro"
        },
        {
            "id": "1",
            "name": "jiro"
        }
    ]
}

이 JSON 파일을 구문 분석하고 내용을 그대로 표시하는 코드를 샘플로 설명합니다.

3. pubspec.yaml에 라이브러리 추가

2020/8/27 시점의 최신 버전입니다.

pubspec.yaml

dependencies:
  json_annotation: ^3.0.1

dev_dependencies:
  build_runner: ^1.10.2
  json_serializable: ^3.4.1

4. 모델 만들기

JSON 파일을 serialize/deserialize하기 위한 모델을 만듭니다.

위에서 설명한 JSON 파일에 해당하는 샘플 코드는 다음과 같습니다. 이번에는 중첩 구조의 JSON 파일이므로 모델 자체도 두 개 필요합니다.

덧붙여 이 소스 코드를 작성한 시점에서는 에러로 빌드는 통과하지 않습니다. 후술하는 툴을 사용해 sample.g.dart 파일을 자동 생성할 필요가 있기도 하므로, 깊은 것은 생각하지 않고 템플릿으로서 사용합시다. fromJson , toJson 메소트에서 직렬화, deserialize
JsonSerializable의 사양은 여기을 참조하십시오.

model/sample.dart

import 'package:json_annotation/json_annotation.dart';
part 'sample.g.dart'; // これは後述の手順で自動生成されるソースコードです！

@JsonSerializable()
class SampleModel {
  SampleModel({this.id, this.name});
  String id;
  String name;

  factory SampleModel.fromJson(Map<String, dynamic> json) =>
      _$SampleModelFromJson(json);

  Map<String, dynamic> toJson() => _$SampleModelToJson(this);
}

@JsonSerializable(explicitToJson: true)
class Samples {
  List<SampleModel> list = [];
  Samples(this.list);

  factory Samples.fromJson(Map<String, dynamic> json) =>
      _$SamplesFromJson(json);

  Map<String, dynamic> toJson() => _$SamplesToJson(this);
}

5. *.g.dart 파일 자동 생성

build_runner 라이브러리를 사용하여 sample.g.dart 파일을 자동으로 생성합니다.

$ flutter packages pub run build_runner build

6. JSON 파일을 구문 분석하여 모델에 저장

Samples.fromJson(jsonDecode(JSONファイルのパス)) 같은 느낌으로, JSON 파일을 오픈＆퍼스 해, 결과가 리턴됩니다. 간단하네요.

main.dart

class _MyHomePageState extends State<MyHomePage> {
  Samples _samples;

  @override
  void initState() {
    super.initState();
    _jsonFileLoad().then((value) {
      setState(() {
        _samples = value;
        assert(_samples.list.isNotEmpty);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: _samples == null
              ? List<Widget>()
              : <Widget>[
                  for (int i = 0; i < _samples.list.length; i++)
                    Text(
                      'ID: ${_samples.list[i].id}, NAME: ${_samples.list[i].name}',
                    ),
                ],
        ),
      ),
    );
  }

  Future<dynamic> _jsonFileLoad() async {
    String path = 'assets/sample.json';
    String jsonString;

    try {
      jsonString = await rootBundle.loadString(path);
    } on FlutterError {
      print('Faild to open $path');
      exit(0);
    }

    return Samples.fromJson(jsonDecode(jsonString));
  }

7. 참고문헌

JSON Serialization in Dart ~json_serializable의 권~

8. 샘플 프로젝트 세트

이번에 설명한 샘플 프로젝트는 github에 있습니다.