[Flutter.241122] Flutter에서 JSON 파일 로드하기

JSON 데이터를 화면에 뿌려주려고 한다. 어떻게 하는지 찾아보았다.

 

Step 1. 

pubspec.yaml 파일에 .json 확장자의 파일 위치들을 assets 안에 넣어준다.

 

  assets:
    - lib/mock_data/ask.json
    - lib/mock_data/help.json

 

이런식으로 로드하고자 하는 파일의 경로를 추가하고 저장한다.

나는 assets 아래에는 이미지만 들어가는 줄 알았는데, 아니구나. 생각해 보니 Image만 받을 내용이었으면 이름을 Image로 애초에 하지 않았을까 싶다.

 

그냥 이렇게 넣으면 어떨까?

  assets:
    - lib/mock_data/

 

하지만 나는 행여 데이터 못 읽어올까 마음이 쫄린 나머지, 그냥 각각의 파일을 다 넣어 줬다. 첫 번째 코드 블럭대로.

 

Step 2. 

flutter 프로젝트 안에서 JSON 파일을 로드할 때 사용할 패키지들을 임포트 한다.

JSON 파일 로드에는 rootBundle 이라는 패키지가 필요하다고 한다.

 

그래서 rootBundle 공식 문서를 확인해 보니, 하단에 'consider using assetBundle rather than rootBundle' 이라고 쓰여 있다. 조금 찾아보니, assetBundle은 동적으로 이미지 로드하거나 하는 등의 경우에 더 적합한가보다. 나는 간단한 앱 화면 설정이므로, appBundle은 나중에 써 보기로 하고, 오늘은 rootBundle로 가겠다.

 

import 'dart:convert';
import 'package:flutter/services.dart' show rootBundle;

 

 

Step 3. 

JSON 파일을 원하는 위치에 불러온다.   

데이터 받아오는 것에 따라 화면을 다시 그려줘야 하므로 StatefulWidget으로 변경했다.

JSON 데이터를 데려오는 파일을 _loadData()로 만들고, 이걸 initState()에서 초기화 해 준 뒤, setState()에 넣어서 상태 업데이트를 해 주었다. 

 

String askJsonUrl = "lib/mock_data/ask.json";
  List<dynamic> _data = [];

  @override
  void initState() {
    super.initState();
    _loadData(askJsonUrl);
  }

  Future<void> _loadData(url) async {
    try {
      final String response = await rootBundle.loadString(url);
      final data = json.decode(response);
      print(data);
      setState(() {
        _data = data;
      });
    } catch (e) {
      print('error: $e');
    }
  }

 

이제 JSON 데이터를 받아올 수 있게 되었다.

 

-끝-