Flutter Webで開発したアプリをリリースするまで参考にしたものをまとめた。

まつまる

2ヶ月かけてやっとこさWebアプリをリリースしました。Flutter Webでの備忘録てきなものです。

まずは宣伝させてください！！

ビアコレとはクラフトビールを検索&口コミが見れて、マップで飲む買えるお店を探せるポータルサイトです。

Flutter webで開発しました。数少ないFlutterWebアプリなので、興味ある方は動かしてみてください。

ビアコレはFlutter大学の共同開発から生まれ、３人のチームメンバーと開発しました。1人じゃ不安なので仲間と一緒に開発してみたい！という方に向けた環境も整っています。

ちなみにビアコレのGithubレポジトリは、Flutter大学に入学すると見放題です。笑

前置きはこのくらいにして本題に入ります。開発中にメモっていたものをコピペしているので若干荒めです。

基本的にはリンク先があるだけなので、さらっと見てください。

Flutter web採用する前にこれをみておいた方が良いんじゃ無い？

https://flutter.dev/docs/development/platform-integration/web

flutter webでWebページを表示する

https://stackoverflow.com/questions/58150503/webview-in-flutter-web

結局はurl_launcherを使いました。。

Flutter webでFirebase authを使ってログインしようとしたらエラーが出てきた。

エラー本文
PlatformException(idpiframe_initialization_failed, Not a valid origin for the client: http://localhost:50506 has not been registered for client ID 644389253258-kgkr9tm22c1s8clahg3o8b98ee1ued56.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and register this origin for your project’s client ID., https://developers.google.com/identity/sign-in/web/reference#error_codes, null)

解決策

flutter run -d chrome –web-hostname localhost –web-port 5000

ターミナルで上記コマンドを叩いて立ち上げる

ちなみに上手くデプロイできていたとしたら、時間差でFirebase Hosting Setup Completeが出てくるので注意

Flutter webでデプロイしたらログインできなくなった

おそらくあなたはずっとlocalhostでやってきたので、デプロイした場所には権限がありません。

Google Cloud Platformを開いて、権限をあげたいドメインのURLを追加しましょう。

flutter web のindex.htmlにfirebaseのapikeyとかさらしちゃっても大丈夫なの？

https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public

https://sunday-morning.app/posts/2021-04-25-firebase-api-key-restriction-google-auth-error

Flutter webで戻るボタンが正常に動かないとき

解決法はNavigation2.0を使うこと

https://medium.com/flutter/learning-flutters-new-navigation-and-routing-system-7c9068155ade

https://techblog.geekyants.com/navigation-20-routing-on-flutter-web

https://levelup.gitconnected.com/flutter-navigator-2-0-for-authentication-and-bootstrapping-part-2-user-interaction-5dc043e7e44a

auto_router使えば楽ちん

注意点：HogeHogePageのPageが重要。classの名前はどこかにPageをつけないとエラーがでます。HogeHogePageとすればHogeHogeRouterが生成されて、使えるようになる。例えばHogePageHogeとクラス名をつけたらHogeRouterHogeが生成されるので注意。

ratingを実装したい。

ググれば代表的な二つが見つかると思う。

↓最初はflutter rating bar を使っていた。開発中は問題なく使えていたけど、Flutter webにdeployして本番環境にすると、スマホの時だけ表示が安定しなかった。なぜかは分からない。

https://pub.dev/packages/flutter_rating_bar

↓これは本番環境でもちゃんと表示できたので、これを使っている。乗り換えは簡単なので好きな方を使えば良いと思う。

https://pub.dev/packages/smooth_star_rating

文字列がちゃんと枠内に表示されない。

■

■

https://teratail.com/questions/290112

TextStyleのheightを指定してやればOK

Page Not Found

↓これで解決。

https://qiita.com/atona/items/2bcac0afbec83260928d

写真を良い感じに見せる

https://qiita.com/naoaki_kaito/items/a55535cbe0e98eec5454

twitterにシェアする

https://qiita.com/littleossa/items/0ff4a3308a57e7d1b14c

https://qiita.com/Riscait/items/422cc22873371617c850

twitterなどのアイコンを表示させたいとき

https://qiita.com/kaitoland/items/64634664863d2a61c00f

タブコントロール

https://qiita.com/Hattomo/items/9e2be1f2c06f6ead1b7d

動作がもたつくなと思ったらFlutter Performanceを開いて確認する

firestoreのコレクショングループのセキュリティルール

https://firebase.google.com/docs/firestore/security/rules-query?hl=ja

https://qiita.com/sgr-ksmt/items/1a731fdadf06119d35fc#request-resource

CloudStorageのセキュリティルール

https://firebase.google.com/docs/rules/basics?hl=ja#cloud-storage

変数そのものがnullかもしれない場合の処理

例えば、loginUser.name==review.nameのときだけレビュー削除ボタンを表示させたいとしよう。ただし、これではloginUserがnullだったときにloginUser.nameなんて存在しないよと怒られてしまう。その場合、loginUser?.name==review.nameとしよう。?をつけることで一旦nullを受け入れて論理演算してくれるので便利。もちろん、普通にloginUserがnullだったらという処理をかましてもOK。

セキュリティルールは後回しにする？やめておけ

プロジェクトを立ち上げたばっかりのときは大したデータもないので、とりあえず動作することを優先して後回しにしがちだと思う。僕がそうだった。

なので、僕はある程度完成してからセキュリティルールを書いた。そうするとあらゆるところでFirestoreやStorageからエラーが返ってくる。やっかいなのがエラーが起きないと、どこが問題なのかわからないので、get,update,deleteなどなど全部動かしてエラーが起きるか確認しないといけない。複雑なアプリを作ろうとしているなら気をつけてくれ。