Flutterでデバイスから画像を選択し、画像を切り抜き縮小圧縮して、Firebase Strageにアップロードする

個人開発でFlutterを利用したアプリ開発を行っています。
ユーザーがアプリ内で画像を選択し、切り抜き・縮小・圧縮をかけた後に、Firebase Storageにアップロードする機能について解説します。

今回利用するパッケージ

デバイスから画像の選択

画像を切り抜き・縮小・圧縮

コード

Future<void> _selectAndUploadImage(context) async {
    //デバイスから画像を選択
    final XFile? image = await picker.pickImage(source: ImageSource.gallery);

    //画像を切り抜き縮小圧縮
    CroppedFile? croppedFile = await ImageCropper().cropImage(
      sourcePath: image!.path,
      aspectRatioPresets: [
        CropAspectRatioPreset.square,
      ],
      compressQuality: 70,
      maxHeight: 512,
      maxWidth: 512,
      uiSettings: [
        AndroidUiSettings(
            toolbarTitle: 'Cropper',
            toolbarColor: Colors.blue,
            toolbarWidgetColor: Colors.white,
            initAspectRatio: CropAspectRatioPreset.original,
            lockAspectRatio: false),
        IOSUiSettings(
          title: 'Cropper',
        ),
        WebUiSettings(
          context: context,
        ),
      ],
    );

    //Firebase Storageへアップロード
    uploadImage(croppedFile);

    //アップロード後の処理
}

// Firebase Strorageへアップロード
Future<String> uploadImage(CroppedFile f) async {
    final storageRef = FirebaseStorage.instance.ref();
    final gcsPath = "hoge/fuga";
    final uploadRef = storageRef.child(gcsPath);
    final uploadTask = uploadRef.child("image.jpg").putFile(File(f.path));
    final snapshot = await uploadTask.whenComplete(() {
      //
    });
    return gcsPath;
}

上記のコードを利用することで、アプリ内での画像選択から、画像の切り抜き圧縮をかけてFirebase Storageへのアップロードまでを実装できます。

Flutterが提供する豊富なパッケージは個人開発には便利です。