Retrofit使ってFlutterのAPI通信を実装する

Retrofit使ってFlutterのAPI通信を実装する方法を解説します。

RetrofitはFlutterのAPI通信でよく使われているDioをラッピングしたパッケージになっており、Dioをさらに使いやすくしたようなイメージです。

packagesの追加

必要なパッケージを追加します。バージョンは記事執筆時のものです。

dependencies:
  dio: ^5.1.2
  retrofit: ^4.0.1

dev_dependencies:
  build_runner: ^2.3.2
  retrofit_generator: ^6.0.0+3

api.dartの作成

api.dartを作成します。ここにAPIを記述していきます。
LoginResponse, LoginRequest, UserはFreezed等を使用してあらかじめ作成してあるものとします。

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

part 'api.g.dart';

// ここにapiのエンドポイントを記載します
@RestApi(baseUrl: "https://api.kamo-it.org")
abstract class RestClient {
  factory RestClient(Dio dio, {String baseUrl}) = _RestClient;

  @POST("/auth/login")
  Future<LoginResponse> authLogin(@Body() LoginRequest request);

  @GET("/users/me")
  Future<User> usersMe();
}

generateファイルの作成

下記コマンドでgenerateファイルを作成します。

flutter pub run build_runner build

これを実行すると、api.g.dart が作成され、apiが使えるようになります。

apiの使用

final dio = Dio();
dio.options.headers["Demo-Header"] = "demo header";
final client = RestClient(dio);

// @POST("/auth/login")を呼ぶ
final loginResponse = await client.authLogin(LoginRequest(...))
// @GET("/users/me")を呼ぶ
final me = await client.usersMe()

以上のようにとても簡単にAPI通信を実装することができます。ぜひ利用してみてください！！