[Flutter] - Http

개요

개발을 하다보면, http를 이용하여 api를 호출해야 하는 경우가 있다.

Flutter에서는 Http를 이용해 호출할 수 있다.

 

설치

pub.dev 에서 http를 검색하면, 설치 방법과 최신 버전을 확인할 수 있다.

https://pub.dev/packages/http

 

http | Dart Package

A composable, multi-platform, Future-based API for HTTP requests.

pub.dev

아래의 두 가지 방법 중 원하는 방법을 선택하여 설치해주면 된다.

Flutter :

flutter pub add http

pubspec.yaml

dependencies:
  http: ^1.1.0

 

사용

사용을 위해 import를 해주어야 한다. 

import 'package:http/http.dart';

따로 이름을 설정을 해주려면 as를 통해 다음과 같이 해주면 된다.

import 'package:http/http.dart' as http;

 

http.get()의 인자로는 Uri가 오게 된다. 우리가 지정해 놓은 baseUrl은 String 타입이므로,

Uri.parse(baseUrl)을 통해 Uri 형태로 만들어준다. 

 

이 후 http.get()을 통해 응답에 대한 결과를 받을 수 있다.

 

아래 코드를 예시로 하면, url을 기준으로, api 통신 결과가 200(성공) 이면, 해당 결과를 json형태로 decode하여 저장을 한다.

import 'package:http/http.dart' as http;

class ApiService {
  static const String baseUrl = ""
  static Future<List<WebtoonModel>> getTodaysToons() async {
    List<WebtoonModel> webtoonInstances = [];
    final url = Uri.parse('$baseUrl');
    final response = await http.get(url);
    if (response.statusCode == 200) {
      final List<dynamic> webtoons = jsonDecode(response.body);
      for (var webtoon in webtoons) {
        webtoonInstances.add(WebtoonModel.fromJson(webtoon));
      }
      return webtoonInstances;
    }
    throw Error;
  }
}

 

이 때 api의 형태의 맞추어 Class 를 생성해준다.

나의 경우에는 id, thumb, title의 형태로 반환되므로,  다음과 같이 만들어준다. fromJson을 통해 각 매칭되는 값에 맞추어 저장해준다.

class WebtoonModel {
  final String title, thumb, id;

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

이 때 반환 값이 Future인데 future의 경우에는 미래의 값이다. 

async로 비동기 처리를 하게되어, 아직 값이 도착하지는 않았지만, Future<타입명> 곧 타입명이 도착한다는 뜻이다.

 

'Flutter > Study' 카테고리의 다른 글

[Flutter] - Future Builder  (0) 2023.07.20