FlutterでFirebaseのStorageを使う〜後編〜

昨日(FlutterでFirebaseのStorageを使う〜前編〜)の続きです。

AndroidXに対応する

さて、昨日、Firebaseを使うようbuild.gradleに設定を加えたところ、大量のエラーが出てビルドができなくなりました😨
エラーメッセージ中に「ここ見てね！」とリンクが記述されているので、素直に見に行きます。
ざっくりいうと、android.supportというライブラリが非推奨になって、AndroidXってライブラリに変更されたよ！とのこと。

migrateの方法なども記載されているのですが、自動でAndroidX化してくれる方法を載せてくれている人がいたのでその方法で対応します。

# android/gradle.propertiesに下記を追加
android.useAndroidX = true
android.enableJetifier = true

無事ビルドが通るようになりました！

firebase_storageをインポート

Pubでそれっぽいものを探すと、firebase_storageが出てきます。これだ！
image_pickerと違ってExampleは書かれていないので、手探りでやります💪

まずはpubspec.yamlにfirebase_storageを追加。

dependencies:
  flutter:
    sdk: flutter
  image_picker:
  firebase_storage: # new!

main.dartでインポートします。

import 'package:firebase_storage/firebase_storage.dart';

Flutter製チャットアプリを支える技術を参考にuploadImageメソッドを書きます。
(格好悪いけど、直接getImageから呼び出す)

class _MyHomePageState extends State<MyHomePage> {
  Future getImage() async {
    // (略)
    uploadImage(image);
  }
  Future<String> uploadImage(File file) async {
    int timestamp = DateTime.now().millisecondsSinceEpoch;
    String subDirectoryName = 'images';
    final StorageReference ref = FirebaseStorage()
        .ref()
        .child(subDirectoryName)
        .child('${timestamp}');
    final StorageUploadTask uploadTask = ref.putFile(
        file,
        StorageMetadata(
          contentType: "image/jpeg",
        ));
    StorageTaskSnapshot snapshot = await uploadTask.onComplete;
    if (snapshot.error == null) {
      return await snapshot.ref.getDownloadURL();
    } else {
      return 'Something goes wrong';
    }
  }
  // (略)
}

※ 実行の際にMissingPluginException(No implementation found for ...)というエラーがでる場合は、flutter clean & flutter packages get & flutter runでうまくいく場合があります。

さて、実行すると、firebase-auth is not linked、no auth token for requestといったメッセージが表示されますが、画像のアップロードに関してのエラーはないみたい！

わくわくしながらFirebaseのStorageを見てみると、タイムスタンプの名前のついた画像がアップロードされました！🎉