본문 바로가기
개발노트/Flutter

[Flutter] retrofit , 레트로핏 api 통신 POST 편 #2

by 전지적진영시점 2023. 2. 23.
반응형

개발 환경

---------------------------------

OS : Mac

개발 툴 : android studio

개발 언어 : dart

---------------------------------

 

안녕하세요 지난 포스팅에 이어 

Flutter API 통신을 하여 POST Request를 만들고 실행시켜보겠습니다.

 

<이전글>

https://jpointofviewntoe.tistory.com/113

 

[Flutter] retrofit , 레트로핏 api 통신 POST 편 #1

개발 환경 --------------------------------- OS : Mac 개발 툴 : android studio 개발 언어 : dart --------------------------------- 안녕하세요 이번 포스팅은 flutter 에서 retrofit 라이브러리를 사용하여 api 통신을 해보겠

jpointofviewntoe.tistory.com

 

3. API endPoint를 설명하는 인터페이스 파일 생성

import 'package:retrofit/retrofit.dart';
import 'package:dio/dio.dart';
import '../model/datamodel.dart';

part 'restclient.g.dart';

@RestApi(baseUrl: "https://???")
abstract class RestClient {
  factory RestClient(Dio dio, {String? baseUrl}) = _RestClient;

  @POST("/test")
  Future<TestAPI> getTestAPI( @Body() TestAPI testAPI );
}

 

 

 

 

4. response 데이터 규격 생성,, 하다 만 ㅎㅎ

 

데이터 모델을 한개 더 만들기 번거로우니 이전 포스팅에서 만들었던 TestApi 모델을 Body에도 넣고 

응답값 모델로도 사용하겠습니다.

 

 

5. 호출

 

<구현부>

Future<TestAPI> testApi() async {
  final dio = Dio(); // Create a Dio instance
  final restClient = RestClient(dio); // Create an instance of the ApiService

  final request = TestAPI(value: "??");

  final response = await restClient.getTestAPI(request);

  return response;
}

마지막으로 api를 호출할 화면으로 호출하는 코드를 구현해줍니다.

final dio = Dio(); // Create a Dio instance
final restClient = RestClient(dio);

 

위 코드 첫번째 줄은 Dio의 인스턴스를 생성합니다.

다음 줄에서 3번에서 생성한 인터페이스의 인스턴스를 생성성합니다.

 

late Future<TestAPI> testApiMethod;

@override
void initState() {
  super.initState();

  WidgetsFlutterBinding.ensureInitialized();

  testApiMethod = testApi();

  if (!kIsWeb && defaultTargetPlatform == TargetPlatform.android) {
    AndroidInAppWebViewController.setWebContentsDebuggingEnabled(true);
  }
}

 

저는 initState()에서 함수를 호출했습니다.

반응형

댓글