LoginSignup
8
2

More than 3 years have passed since last update.

モバイル向けFlutterアプリをFlutterWeb対応するときに注意したいこと

Last updated at Posted at 2020-10-22

プロジェクトのルートディレクトリの名前

ハイフンが含まれているとエラーになる 名前に注意 つまりリポジトリ名に注意 アンダーバーにしよう

Platform判定はできない

Platform.isIOSなどで判定しているところは動かないので、その前段階でkIsWebでWebかどうかを判定する

FirebaseのWebアプリを設定しろ

モバイル向けのsecure_storageのパッケージは非対応

アプリ内にログイントークンなど持ちたいからflutter_secure_storageプラグイン使うと思うけど、Webでは非対応なのでshared_preferencesプラグインを使う

APIRequestがエラーになる

CROSサポート(参考)を有効にする必要がある。

開発でテストするなら以下のChrome extensionをインストールしたら解決できる
https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino/related?hl=ja

Fileの扱いについて

そもそもパッケージが違うよ Webではファイルパスでファイルに直接アクセスできないからon memoryで扱う
dart:io
dart:html

Networkから画像が取得できる??

できるけど、AuthHeaderが効かないから画像が取得できない場合もある
https://github.com/flutter/flutter/issues/57187

カメラ使える?

まだ非対応です。
https://github.com/flutter/flutter/issues/45297
ただ、撮影した画像の取得やカメラロール(ギャラリー)からの取得はできます。
https://pub.dev/packages/image_picker_for_web

WebサーバーないけどWebで公開して確認したい!

Github Page(https://pages.github.com/)使えます。
プライベートリポジトリでは無料プランだと使えません。

Bitbucketならプライベートリポジトリでもつかえます
https://support.atlassian.com/bitbucket-cloud/docs/publishing-a-website-on-bitbucket-cloud/

8
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
2