アプリ開発

flutterでfirebaseのStorageに画像を保存する方法

こんにちは。

今回は、

1.flutterで画像をfirebaseのStorageに画像を保存する方法。

2.firebaseのStorageに保存した画像のurlをfirestoreにロードする方法。

について紹介していきます。

この記事によって、

firebaseのstorageに保存した画像をfireStoreからとってこれるようになります。

ちなみに、画像のアップロード、画像の圧縮に関しては、以下の記事で解説しています。

画像のアップロード

【超簡単】flutterで画像を表示(アップロード)する方法今回は、Flutterで画像を表示する方法について紹介したいと思います。 パッケージを使うことで、簡単に実装できます。 パッ...

画像の圧縮

flutter_native_imageで画像を圧縮する方法この記事では、flutterで画像を圧縮する方法を紹介します。 パッケージとして、flutter_native_imageを使用し...

firebaseのStorageの導入

firebaseの導入の導入がまだの方は、こちらの記事が参考になります。

公式ドキュメント

では、ここからは、firebaseの導入が完了しているものとして説明をしていきます。

とっても簡単です。

まず、firebaseのstorageから、「始める」を押す。

進んでいくと、cloud storageのロケーションの選択があります。

僕は、asia-northeast1に設定しています。

次にルールの設定があると思いますが、今回はテストなので、

request.auth == nullに変更します。

セキュリティ的には、request.auth != nullが理想です。

firebaseAuthにログインしているユーザーのみが書き込み可能になるわけです。

今回はただのテストなので、request.auth == nullにします。

これで導入完了です。

次は、パッケージ(firebase_storage)のインストールです。

firebase_storageのインストール

こちらからパッケージをインストールしてください。

手順は、

1.pubspec.yamlのdependenciesに

dependencies: firebase_storage: ^4.0.0

を追加。(最新のものをインストールしてください。)

3.1.6の時とは、もろもろ変わってました。。

 

2.コマンドラインで、flutter pub get

 

3.import ‘package:firebase_storage/firebase_storage.dart’; をインポート。

ios、Androidでの独自の設定はありません。

完了です。

firebaseのstorageに画像を保存するコード例

保存をするだけならば、以下のコードで十分です。

//storageに保存
  void upload(File file) async {
    final StorageReference ref = FirebaseStorage.instance.ref();
    final StorageTaskSnapshot storedImage =
        await ref.child('folder-name').putFile(File(file.path)).onComplete;
   final String downloadUrl = await loadImage(storedImage);
  }

  //url取得
  Future<String> loadImage(StorageTaskSnapshot storedImage) async {
    if (storedImage.error == null) {
      print('storageに保存しました');
      final String downloadUrl = await storedImage.ref.getDownloadURL();
      return downloadUrl;
    } else {
      return null;
    }
  }

uploadに保存した画像をFile型で渡してやってください。

エラーがなければ、downloadUrlにfirebaseのStorageに保存した画像のURLが取得できます。

保存した画像のurlをfirestoreにロードする

まず、firestoreのパッケージをインストールする必要があります。

パッケージのインストールの方法は、上でも軽く説明したので省略します。

ios、Androidでの特別な設定は必要ありません。

firestoreにロードするコード例

先ほど取得したURLをそのまま、渡してやる感じです。

void saveImageInFireStore(String downloadUrl) async {
    await FirebaseFirestore.instance
        .collection('image')
        .doc('image')
        .update({'image': downloadUrl});
  }

バージョンを最新にしたら、一部コードが変わってました。

firebase_coreの古いバージョンを使っている方は、

FirebaseFirestore ⇨ Firestore

update ⇨ updateData

ですかね。

まあ、最新のものが良いでしょう。

まとめ

いかがでしたか?

1.画像をfirebaseのstorageに保存する方法

2.storageに保存した画像をcloud firestoreに保存する方法

をご紹介しました。

参考になれば幸いです。