🦬

【Flutter】iPhoneで背景が透過した画像をimage_pickerで取得すると背景が白くなる

2023/04/07に公開

Flutter

Dart

imagepicker

tech

はじめに

iPhoneで背景が透過した画像をimage_pickerで取得してflutterで表示してみると、背景が透過されておらず、白くなっていて困ったので記事にしました
ある日を境に急に透過されなくなって、その時Twitterで調べると他にも同じように困っていた人がいたことを覚えています

結論

iOS バージョン 13 以降を実行しているiOS デバイス ( iPhone/iPad )は、透明な背景をサポートしていません。結果の画像は、代わりに不透明な白い背景で表示されます。

image_pickerが透過した画像に対応していないのではなく、iPhoneのバージョンのせいだったみたいです。
標準で透過した画像は背景が白い画像に置き換わるみたいです。
↑の記事にはそれを回避するiPhoneの設定方法があるのでやってみると良いと思います。

ちなみに別のパッケージの話になるのですが、image_cropperで透過した画像をcropImageすると背景が白くなりました。なので今困っています。

別の対応策

image_pickerではなくfile_pickerから取得する
画像をファイルに保存する手間がかかりますが、私はこれで対応しました。

image_picker

    final pickedImageFile = await picker.pickImage(source: ImageSource.gallery);
      if (pickedImageFile == null) return '';
    final String pickedImageFilePath =pickedImageFile.path;

↓
file_picker

    final FilePickerResult? pickedImageFile =
        await FilePicker.platform.pickFiles();
    if (pickedImageFile == null) {
      return '';
    }
    final String pickedImageFilePath = pickedImageFile.files.single.path!;

【Flutter】iPhoneで背景が透過した画像をimage_pickerで取得すると背景が白くなる

はじめに

結論

別の対応策

参考

Discussion