app개발/flutter

[Flutter] Json으로 API값 가져오는 방법

pa_songsong 2022. 5. 12. 21:23

flutter에서 비동기로 API값을 가져오는 방법

 

1. 가져올 API의 URL을 적어줍니다.

2. 1번의 API값을 encode해줍니다.

3. http.get()와 Uri를 사용해서 url을 넘겨줍니다.

4. map으로 디코드해서 body를 가져옵니다.

5. response.body를 print한 값을 보고 parsed에 넣을 값을 확인합니다. print한 내용이 아래 그림인데 첫번째 줄의 results가 fromJson에서 사용할 data들을 모두 담고 있으므로 results를 parsed에 넣어줍니다. (카카오 api의 경우 documents였습니다. 각 api마다 다르므로 꼭 확인해주세요.)

이때, 삼항연산자를 사용한 리스트 초기화 혹은 future외부에 data를 담을 리스트를 생성해 초기화 해주어야합니다. 안그러면 null관련 오류가 납니다.

//Future와 async로 비동기 처리 
Future<List<Movie>> getUpcoming() async {
	//URL조합
    final String upcoming = _urlBase + _urlUpcoming + _urlKey + _urlLanguage;

    var url = Uri.encodeFull(upcoming);

	//http로 api에서 값 가져오기 
    var response = await http.get(
        Uri.parse(url));

	//map으로 디코드 하기 
    Map<String, dynamic> parsed = json.decode(response.body);
    //삼항연산자 통해서 null일 경우 []로 초깃값 설정하기
    List<Movie> result =
      parsed['results'] != null ?
      //fromJson은 아래 그림에 정의
    List<Movie>.from(parsed['results'].map((x) => Movie.fromJson(x)).toList()) : [];

    return result;

  }

 

movie클래스 내의 fromJson

Movie.fromJson(Map<String, dynamic> parsedJson) {
    id = parsedJson['id'];
    title = parsedJson['title'];
    voteAverage = parsedJson['vote_average'] * 1.0;
    releaseDate = parsedJson['release_date'];
    overview = parsedJson['overview'];
    posterPath = parsedJson['poster_path'];
 }