[Flutter] Retrofit

이선행·2024년 6월 26일

프로젝트 구조

저는 Retrofit을 Provider와 함께 사용했습니다.
구조는 lib폴더 하위에 resources폴더를 만듭니다.
그 안에 api_service.dart폴더를 만들어줍니다.
lib > resources > api_service.dart
CommonModel과 dioProvider는 개발하는 프로젝트 구조에 맞게 모델, 프로바이더 폴더에 작성하면 됩니다.

api_service.dart

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:modibic_flutter/model/common/common_model.dart';
import 'package:modibic_flutter/model/user/user_model.dart';
import 'package:modibic_flutter/provider/dio_provider/dio_provider.dart';
import 'package:modibic_flutter/utils/constants.dart';
import 'package:retrofit/retrofit.dart';
import 'package:dio/dio.dart' hide Headers;
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'api_service.g.dart';

@Riverpod(keepAlive: true)
ApiService apiRepository(ApiRepositoryRef ref){
  final dio = ref.watch(dioProvider);
  return ApiService(dio);
}

@RestApi(baseUrl: Constants.apiBaseUrl)
abstract class ApiService {
  factory ApiService(Dio dio, {String baseUrl}) = _ApiService;

  @POST("login/insertMember")
  @Headers(<String, dynamic> {"content-type" : "application/json"})
  @FormUrlEncoded()
  Future<CommonModel<UserModel>> insertMember(@Body() Map<String, dynamic> map);
}


api_service.dart는 이렇게 작성해서 사용하고
api의 리턴타입은 commonModel클래스를 만들어서 사용했습니다.

dio

import 'package:flutter/foundation.dart';
import 'package:pretty_dio_logger/pretty_dio_logger.dart';
import 'package:riverpod/riverpod.dart';
import 'package:dio/dio.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'dio_provider.g.dart';

@Riverpod(keepAlive: true)
Dio dio(DioRef ref){
  final Dio dio = Dio();
  if(kDebugMode){
    dio.interceptors.add(PrettyDioLogger());
  }
  dio.options = BaseOptions(receiveTimeout: const Duration(milliseconds: 10000), connectTimeout: const Duration(milliseconds: 10000));
  return dio;
}

dio는 Provider로 작성해서 받아왔습니다.

CommonModel

import 'package:json_annotation/json_annotation.dart';

part 'common_model.g.dart';

@JsonSerializable(genericArgumentFactories: true)
class CommonModel<T> {
  String? code;
  String? messages;
  String? token;
  T? data;

  CommonModel({this.code, this.messages, this.token, this.data});

  factory CommonModel.fromJson(
          Map<String, dynamic> json, T Function(Object? json) fromJsonT) =>
      _$CommonModelFromJson(json, fromJsonT);

  Map<String, dynamic> toJson(
    Map<String, dynamic> Function(T value) toJsonT,
  ) =>
      _$CommonModelToJson(this, toJsonT);
}

이게 제가 사용하는 CommonModel입니다.
api에서 code, messages, token을 기본으로 내려받고 data는 모델클래스를 따로 만들어서 받으면 되도록 지정했습니다.

0개의 댓글