[Flutter] http get 요청 보내기

Flutter에서 http 요청을 보내보자 !

 

1. pubspec.yaml을 수정한다.

pubspec.yaml 파일에는 현재 프로젝트에 필요한 의존성들이 기입되어 있다. 이 파일을 내리다 보면 dependencies 부분이 나온다.

그 부분을 다음과 같이 수정한다.

dependencies:
  flutter:
    sdk: flutter
  http: any

이제 우리는 http package를 프로젝트에 쓸 수 있다.

 

2. http.dart를 import 한다.

프로젝트의 main.dart로 돌아가서 

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

를 맨 위에 추가해준다. 이제 http.METHOD 식으로 패키지 사용이 가능하다.

 

3. 사용한다.

! 여기서 만약 mac을 이용하고 있다면 http 커넥션 permission을 줘야 한다.

https://stackoverflow.com/questions/57841871/flutter-http-get-fails-on-macos-build-target-connection-failed

Flutter - http.get fails on macos build target: Connection failed

 

나는 이전 게시물에서 get 요청을 처리할 서버를 만들고 그를 이용해봤다. 

get 요청이 잘 들어간다면 받는 문자열은 "Hello World! 우리 서버 잘 돌아가는 중"

우선 기본 프로젝트의 _counter를 String을 받기 위해 String으로 바꿔주고

counter를 수정하는 _incrementCounter 메서드를 다음과 같이 바꿔준다.

class _MyHomePageState extends State<MyHomePage> {
  String _counter = '0';

  void _incrementCounter() async {
    var res = await http.get(Uri.parse("http://192.168.219.121:3000")); //본인 서버 주소
    setState(() {
      print(res);
      _counter = res.body.toString();
    });
  }

http.get은 비동기적으로 이루어지므로 await을 하지 않으면 Future 타입 자료형을 반환한다. 그렇기에 비동기 함수로 바꿔주고 await을 걸어줘야 제대로 동작한다.

 

이렇게 하고 빌드하고 버튼을 누르면

이렇게 서버에서 데이터를 받아와 나타내는 것을 볼 수 있다.