[Flutter] Flask 서버로 로그인 데이터 전송하기

플러터 앱에서 플라스크 서버로 로그인 데이터를 전송해보자.

플러터에서 TextFormField 에서 데이터를 가지고 오는 것과 간단한 플라스크 서버는 이전 포스팅을 참고하자.

[Flutter (플러터)] - [Flutter] TextFormField 의 입력값 가져오기

[Flutter (플러터)] - 토큰 기능 테스트를 위한 간단한 Flask 서버 만들기

 

 

 

HTTP POST 요청을 쉽게 하기 위해, DIO 패키지를 설치하자

> flutter pub add dio # dio 설치

https://pub.dev/packages/dio

dio | Dart Package

구현

외부와의 통신이기 때문에 이를 처리하는 함수를 비동기 함수(async, await)로 설정해 주었습니다.

ios 시뮬레이터는 자신의 PC 과 통신하기 위해서 IP 로 127.0.0.1 을 사용합니다.

그러나 안드로이드 시뮬레이터는 IP로 10.0.2.2 를 사용합니다.

ElevatedButton(
    onPressed: () async { // 통신을 해야하므로 비동기로 정의해줌.
      final dio = Dio();
      final serverIp = '10.0.2.2'; // 안드로이드 에뮬레이터 기준으로 자신의 PC 로 데이터를 전송할 수 있는 IP 가 10.0.2.2 임.
      try {
        final response = await dio.post(
            'http://${serverIp}:5000/auth/login',
            // flask 서버가 5000번 포트에서 동작하고 있고, /auth/login 경로로 데이터를 받음.
            data: { 
            // post 로 보낼 데이터임.
              'userId': userIdController.text, 
               // ID용 TextFormField에 등록해놓은 컨트롤러에서 데이터를 가져온다. 
              'userPw': userPwController.text, 
              // PW용 TextFormField에 등록해놓은 컨트롤러에서 데이터를 가져온다. 
            },
            options: Options(
                contentType:
                    Headers.formUrlEncodedContentType), 
                    // HTTP 통신 데이터 타입을 나타내는 헤더 정보(contentType) 설정
                );
        
        
        // await 키워드가 있기 때문에, post 가 값을 반환하기 전까지 아래 코드 수행되지 않음.
        if (response.statusCode == 200) {
          // 요청에 대한 응답이 정상일 경우 Success 을 프린트함.
          print("LOGIN SUCCESS");
        } else {
          // 응답코드가 200(정상)이 아닐 경우 FAIL 을 프린트함.
		  print("LOGIN FAIL");
        }
      } catch (error) {
        // 요청에서 에러가 발생할 경우 Error 를 프린트함.
        print("ERROR : $error");
      }
    },
    child: Text('LOGIN'),
 )