[Flutter] API로 정보 불러오기

[문제]

https://webtoon-crawler.nomadcoders.workers.dev

프로그램을 실행하면, 위 링크의 API 정보를 불러와 WebtoonModel 클래스로 만들기

-> 확인을 위해 정보의 title 출력

---

[정답]

1. http 설치 

*설치 방법 :https://pub.dev/packages/http/install

 

2. home_screen.dart 작성

 

3. api_service.dart 작성

• Uri.parse()로 Uri 변수 생성
• get()으로 정보 불러오기  - 반환타입이 Future<Response>이므로, await/async 키워드 사용
• get()의 리턴값.statusCode == 200 (정상) 이면, String 타입으로 저장되어 있는 response.body를 클래스화

4. WebtoonModel 클래스 생성

• 전달 받은 Json의 데이터인 id, title, thumb 선언
• .fromJson 생성자 선언 -> 전달 인자 타입 : Map<String, dynamic>

5. 전달 받은 json정보를 WebtoonModel 클래스 리스트로 저장

• jsonDecode()를 통해 sting으로 저장된 response.body를 JSON형식으로 저장 //import 'dart:convert';
• List<WebtoonModel> 변수를 만들어서, 데이터 WebtoonModel 클래스로 저장

 

#main.dart 코드

import 'package:flutter/material.dart';
import 'package:testflutter/screens/home_screen.dart';
import 'package:testflutter/service/api_service.dart';

void main() {
  ApiService().getTodaytoons();
  runApp(const App());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const HomeScreen();
  }
}

 

#api_service.dart 코드

import 'dart:convert';

import 'package:http/http.dart' as http;
import 'package:testflutter/model/webtoon_model.dart';

class ApiService {
  final baseUrl = "https://webtoon-crawler.nomadcoders.workers.dev";
  final today = "today";
  List<WebtoonModel> webtoonModels = [];

  void getTodaytoons() async {
    final url = Uri.parse('$baseUrl/$today');
    var response = await http.get(url);
    if (response.statusCode == 200) {
      List<dynamic> webtoons = jsonDecode(response.body);
      for (var webtoon in webtoons) {
        //webtoons의 모든 webtoon에 대해서
        webtoonModels.add(WebtoonModel.fromJson(webtoon));
      }

	//확인용 코드
      for (var testToon in webtoonModels) {
        print(testToon.title);
      }
    } else {
      throw Error();
    }
  }
}

 

#webtoon_model.dart

class WebtoonModel {
  final String id, title, thumb;

//named constructor
  WebtoonModel.fromJson(Map<String, dynamic> json)
      : id = json['id'],
        title = json['title'],
        thumb = json['thumb'];
}