[Flutter] - Json파일 추가

Json 파일 추가

 

먼저 Json 파일을 프로젝트에 추가해준다.

 

pubspec.yaml

 

assets에 추가한 json파일의 경로를 추가한다.

 

사용

 

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class JsonView extends StatelessWidget {
  const JsonView({super.key});

  @override
  Widget build(BuildContext context) {
    Future loadJson() async {
      final String response = await rootBundle.loadString("response.json");
      final data = await json.decode(response);
      return data;
    }

    Future pokemonInfo = loadJson();
    return Scaffold(
        appBar: AppBar(
          title: Text("포켓몬 정보"),
        ),
        body: FutureBuilder(
            future: pokemonInfo,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return ListView.separated(
                    itemCount:
                        snapshot.data["data"]["text_entries"]["text"].length,
                    separatorBuilder: (_, __) => Divider(),
                    itemBuilder: (_, index) {
                      return Text(
                          "${snapshot.data["data"]["text_entries"]["text"][index]}");
                    });
              } else if (snapshot.hasError) {
                return Center(
                  child: Text("${snapshot.error}"),
                );
              } else {
                return Center(
                    child: CircularProgressIndicator(
                  strokeWidth: 100,
                ));
              }
            }));
  }
}

 

이 코드를 작성하다 문득 궁금한 점이 생겼다.

 

1. Future란?

 

Dart언어에서 비동기 프로그래밍을 위한 타입으로, 미래에 완료될 작업을 나타낸다고 한다.

뭔가 swift의 async/await와 매우 비슷한것 같다. (Task나 Promise 같은느낌)

 

Future loadJson() async {
      final String response = await rootBundle.loadString("response.json");
      final data = await json.decode(response);
      return data;
    }

코드를 하나씩 잘라서 해석 해보면

loadJson()함수가 실행이 -> json파일을 불러옴 -> 대기하다가 json파일을 디코딩 -> 반환

이런느낌인거 같다. 당연히 대기는 다른 우선순위가 높은 task들을 실행하다 본인 차례가 되면 실행되는 것일 것이다.

 

2. 비동기로 동작해야하는 이유는?

 

파일을 불러오거나(fopen) API요청과 응답이 처리되는 시간은 기본적으로 시간이 걸림.

그래서 사용자와 반응을 해야하는 부분이 우선적으로 처리되야하기 때문에 비동기로 동작해야함.

 

 

---

 

받아온 정보를 ListView.builder 혹은 ListView.separated로 표시해줬다.