[Flutter] Dio 사용해서 API 요청하기-①

Dio를 사용하기 위해서는 먼저 패키지를 설치해줘야 한다.

① 패키지 설치하기

방법은 2개 있는데 각자 편한 걸로 쓰면 된다.

①-1. pubspec.yaml에 작성하기

dependencies:
  flutter:
    sdk: flutter
  
  dio: ^5.5.0+1 

①-2. 터미널 창에 flutter pub add dio 작성하기
그리고 flutter pub get까지 해주자!

그럼 본격적으로...
로그인 버튼과 회원가입 버튼을 api와 연동해보자! (일단, Textfield 입력하는 건 신경 X)

② Dio 선언과 import

③ 아이피

기본 아이피 == localhost
final emulatorIp = '10.0.2.2:(port)';
final simulatorIp = '127.0.0.1:(port)';

// Platform.is 작성하면 사진처럼 지금 어떤 OS에서 코드를 짜고 있는지,
// 어디서 코드가 실행됐는지 알 수 있는 메소드가 나옴. 
// isIOS라면 simulatorIp를 반환하고, 아닐 경우에는 emulatorIp를 반환!
final ip = Platform.isIOS ? simulatorIp : emulatorIp;

④ 요청 및 사용하기

여기서 중요한 건 base64 인코딩 작업인데, 이건 그냥 외워서 쓰면 된다.

ElevatedButton(

       // 비동기로 요청하므로 async -> await 작성도 잊지말자!
       onPressed: () async {
       
       // 토큰 생성=> ID:비밀번호
       const rawString = 'test@test.ai:testtest';

       // 토큰 Base64 인코딩
       // <String 값을 넣고, String 값을 반환 받겠다>
       Codec<String, String> stringToBase64 = utf8.fuse(base64);

      // 사용하기
      // rawString라는 String 값을 stringToBase64로 인코딩해서 token에 담기 
      String token = stringToBase64.encode(rawString);

      // dio선언 후, dio. 하면 http 요청 메소드들이 나옴
      // post(path) => 경로 작성
      // resp는 응답 받는 곳이라고 생각하면 된다.
      // options: 파라미터 => 로그인에 필요한 데이터들!
      final resp = await dio.post( 
      	'HTTP://$ip/auth/login',
       	options: Options(
             headers: {'authorization': 'Basic $token'}),
             	);
             },
                      
            // (생략)