Flutter http 패키지와 api 통신 하기

Flutter에서는 어떻게 http 통신을 할까? 

 

 

flutter 패키지인 http를 이용해서 api 통신을 하는 예를 알아보자. 

https://pub.dev/packages/http

http | Dart Package

 

 

 

환경설정 

pubspec.yaml 파일에 http package를 등록해 주자.

http: ^0.13.4

 

 

http의 get/post function을 사용하기 위해서는 http package의 import가 필요하다. 

import 'package:http/http.dart';

or 

// as http의 경우는 function을 호출할때 
// http라고 앞에 붙여서 function의 출처를 확실히 할 수 있다. 
import 'package:http/http.dart' as http;

 

 

 

http 패키지에는 여러가지 http 메소드 들을 제공하고 있는데 그중에서 우리가 자주 사용하는 get/post에 대해서 알아보자. 

 

---

get sample 

//Uri를 통해 string => uri 객체로 변환 
var url = Uri.parse(urlString);
//http 패키지의 get function 으로 통신 
var response = await get(url);

//결과값 response 로 객체 변환 
List<Results> result = [];
var respObj = PopularMovies.fromJson(jsonDecode(response.body));

if (respObj.results != null) {
result = respObj.results!;
}

//response에서 사용할 내용 가공해서 전달. 
return result;

 

 

 

---

post sample 

var url = Uri.parse(urlString);
//header
var headers = {'Content-Type': 'application/json'};
//map data
var data = {
  "value": 8.5
};
//dart:convertor 패키지의 jsonCodec 을 통해 map to json
var body = json.encode(data);
var response = await post(url, body: body, headers: headers);

if (response.results != null) {
  var respObj = Results.fromJson(jsonDecode(response.body));
  result = respObj.results!;
}

var errResponse = ErrResponse();

return errResponse;

 

 

---

비동기 응답 받기 

// 결과값으로 future 객체 반환 
Future<SomeObj> _something async {
	var url = Uri.parse(urlString);
    //비동기 통신 
	var response = await get(url);
    
    var result = SomeObj.fromJson(jsonDecode(response.body));
    return result;
}

 

 

 

widget과 연결해서 사용하기 

//stateful widget의 내용 

late Future<SomeObj> apiResult;

@override
void initState() {
    super.initState();
    apiResult = _something();
}


@override
Widget build(BuildContext context) {
return MaterialApp(
  home: Scaffold(
  	//FutureBuilder를 통해 apiResult에서 결과 data를 추출 ui에 반영 
    body: FutureBuilder<SomeObj>(
      future: apiResult,
      builder: (context, snapshot) {
      
        if (snapshot.hasData) {
        //data가 정상적으로 넘어왔을때 
          return _makeui(snapshot.data!);
        } else if (snapshot.hasError) {
        //data가 정상적으로 넘어오지 않으면 
          return _hasError();
        }
        
        return _defaultView();
      },
    ),
  ),
);

 

 

sample이라 실제 내용을 확인 할 수 없지만 

간단한 http 사용법에 대해서 알아보았다. 

 

 

일반적으로는

 

1. api를 호출

2. 데이터 받아 객체화

3. 결과에 따라 알맞는 data 표현 

 

의 순서로 이루어 질것이다. 

 

여기에서 실제 function혹은 method의 구분 및 class에 대한 내용은 여기서 다루지 않는다. 

posting이 너무 길어지기 때문이다. 

 

확인 하지 못한 내용은 다른 posting을 통해 알아보도록 하자.