FlutterWebで画像をアップロードする

どうやらモバイルとやり方が違うらしい？

FlutterWebは趣味で少し使ったことがあるくらいで、キャッチアップはしていませんでした。しかし、仕事で必要になりそうなので、急いで色々とやったことない機能の実装を試してみることにしました😱

画像のアップロードをやってみる

今回はこちらの記事を参考に、画像のアップロードをFlutterWebでやってみるアプリを作ってみました。
https://zenn.dev/tatukane/articles/e5e7f9be7be3ef

必要なパッケージを追加しておきましょう。

https://pub.dev/packages/firebase_core
https://pub.dev/packages/firebase_storage/install

FlutterWebだと、image_pickerのパッケージが違うらしいので、今回はこちらを使用します。
https://pub.dev/packages/image_picker_web

FirebaseStorageを使える状態にしておいて、セキュリティールールは一旦、if trueにして、imageフォルダを作成して、アプリを実行してみてアップロードをやってみてください。
画像がimageフォルダの中に、入っていたら、成功です。

こちらがイケメンのお兄さんの記事を参考に作ったサンプルコードです。時々、Twitterでお話ししてたことがあります。勉強熱心な方でした。

main.dart

import 'dart:typed_data';

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/material.dart';
import 'package:image_picker_web/image_picker_web.dart';

import 'firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final _auth = FirebaseAuth.instance;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  final _auth = FirebaseAuth.instance;

  void uploadPicture() async {
    try {
      Uint8List? uint8list = await ImagePickerWeb.getImageAsBytes();
      if (uint8list != null) {
        var metadata = SettableMetadata(
          contentType: "image/jpeg",
        );
        FirebaseStorage.instance.ref("image/sample").putData(uint8list, metadata);
      }
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: ElevatedButton(
            onPressed: () async {
              uploadPicture();
            },
            child: Text('Upload')),
      ),
    );
  }
}

セキュリティールールを変更する

画像を保存するフォルダを作る

画像をアップロードする画面

自分のパソコンから画像をアップロードする

画像が表示されていたら成功

最後に

FlutterWebは、案件が少ないことから、やることは稀だろうなと思っていましが、転職が決まったスタートアップの企業さんでは、採用していました。
モバイルとは、使用するパッケージの種類が異なるものもあるので厄介ですね。でも簡単にWebアプリが作れるので、私は気に入っております。