【Flutter】Dio + Retrofit 画像送信

Dio+Retrofitで、画像を送信する際につまづいたので、備忘録を兼ねて綴ります。

使用するパッケージは以下。

https://pub.dev/packages/dio
https://pub.dev/packages/retrofit
https://pub.dev/packages/image_picker

実装

retrofitを使って、クライアントを作成する。

apis/post_api_client.dart

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

part 'post_api_client.g.dart';

@RestApi(baseUrl: 'http://localhost/api/')
abstract class PostApiClient {
  factory PostApiClient(Dio dio, {String baseUrl}) = _PostApiClient;
  
  @POST('/posts')
  @MultiPart()
  Future<dynamic> createPost(
    @Part() String text,
    @Part() File image,
  );
}

「@MultiPart()」を付けることで、multipart/form-data形式でデータを送信することができる。

また、

@Field（'text'） String text,
@Field('image') File image,

のように、@Fieldではなく、

@Part() String text,
@Part() File image,

のように、@Partにする必要がある。

上記ファイルを作成後、以下コマンドを実行。
flutter pub run build_runner build --delete-conflicting-outputs
post_api_client.g.dartが生成される。

あとは以下のような感じで、画像をギャラリーから取得して渡してやればOK。

final picker = ImagePicker();
final pickedFile = await picker.pickImage(source: ImageSource.gallery);

if (pickedFile == null) {
   return;
}

final File image = File(pickedFile.path);

PostApiClient(Dio()).createPost('text', image);