[Flutter] Retrofit, Dio로 편하게 API 통신하자

Flutter로 외부 백엔드와 연동할때가 있다.

매번 불필요한 모델을 만들지 말고 아래와 같이 편하게 연동부를 개발하자

 

 

1. 먼저 pubspec.yaml에 필요한 패키지를 추가

dependencies:
  dio: ^5.4.0
  retrofit: ^4.0.3
  json_annotation: ^4.8.1

dev_dependencies:
  retrofit_generator: ^7.0.7
  build_runner: ^2.4.6
  json_serializable: ^6.7.1

 

2. api-service.dart

import 'package:dio/dio.dart';
import 'package:retrofit/http.dart';

part 'api_service.g.dart';

@RestApi(baseUrl: "http://3.36.95.205:8080/")
abstract class ApiService {
  factory ApiService(Dio dio, {String baseUrl}) = _ApiService;

  @GET("/users")
  Future<List<User>> getUsers();

  @GET("/users/{id}")
  Future<User> getUser(@Path("id") int id);

  @POST("/users")
  Future<User> createUser(@Body() Map<String, dynamic> user);

  @PUT("/users/{id}")
  Future<User> updateUser(@Path("id") int id, @Body() Map<String, dynamic> user);

  @DELETE("/users/{id}")
  Future<void> deleteUser(@Path("id") int id);
}

 

 

 

3. User모델

import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart';

@JsonSerializable()
class User {
  final int id;
  final String name;
  final String email;

  User({required this.id, required this.name, required this.email});

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
  Map<String, dynamic> toJson() => _$UserToJson(this);
}

 

 

4. Generate 파일 생성

flutter pub run build_runner build --delete-conflicting-outputs

 

 

5. Retro Api 사용

void main() async {
  final dio = Dio();
  final apiService = ApiService(dio);

  // 사용자 목록 가져오기
  List<User> users = await apiService.getUsers();
  print("Users: ${users.map((u) => u.name).toList()}");

  // 특정 사용자 가져오기
  User user = await apiService.getUser(1);
  print("User: ${user.name}");

  // 사용자 추가
  User newUser = await apiService.createUser({"name": "John Doe", "email": "john@example.com"});
  print("Created User: ${newUser.name}");

  // 사용자 업데이트
  User updatedUser = await apiService.updateUser(1, {"name": "Jane Doe", "email": "jane@example.com"});
  print("Updated User: ${updatedUser.name}");

  // 사용자 삭제
  await apiService.deleteUser(1);
  print("User deleted");
}