まつまるまつまる

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

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

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

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

ビアコレはFlutter大学の共同開発から生まれ、3人のチームメンバーと開発しました。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とGoogle Domainを接続する

https://qiita.com/gremito/items/0692f646ddd28d2b26b8

FIrebase HostingでWebアプリを公開する

https://zenn.dev/pressedkonbu/articles/deploy-flutter-web-app-with-firebase-hosting

https://www.flutter-study.dev/host-web-app/host-web-app/

Flutter Webをデプロイしてみたけど、写真が表示されない。(スマホは表示できている)

https://qiita.com/yana1316/items/cb865d84fd4ffe0abbb0

https://zenn.dev/kboy/articles/bd34e87f1a6222

flutter web deploy Firebase Hosting Setup Completeのまま、デプロイが反映されない

https://qiita.com/fukusin/items/c5f5592b50101dfaea25#-firebase-hosting-setup-complete-%E3%81%AE%E3%81%BE%E3%81%BE%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%8C%E5%8F%8D%E6%98%A0%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84

ちなみに上手くデプロイできていたとしたら、時間差で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使えば楽ちん

注意点:HogeHogePagePageが重要。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のときだけレビュー削除ボタンを表示させたいとしよう。ただし、これではloginUsernullだったときにloginUser.nameなんて存在しないよと怒られてしまう。その場合、loginUser?.name==review.nameとしよう。?をつけることで一旦nullを受け入れて論理演算してくれるので便利。もちろん、普通にloginUsernullだったらという処理をかましてもOK

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

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

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

画面遷移は何も考えずにpushとpopだけ使ってないか?

これをよく読め

https://qiita.com/granoeste/items/19c119ffc36a016e6223

googlemapのPlaceIdから取得したphotosを表示させたい。

上記で取得したphotosってそのまま使っても表示できません。

https://developers.google.com/maps/documentation/places/web-service/photos

googlemapのピンをカスタムしたい

https://maps.multisoup.co.jp/blog/1881/

シンプルなCardを作成する

https://www.techgalery.com/2019/12/flutter-cards-example-codes.html

https://note.com/_hi/n/n0dc22e030cd0

https://zuma-lab.com/posts/flutter-nested-list

List型のforEachでindexを取得したい

https://note.com/hatchoutschool/n/n67345a5038c4

スクロールが下までいったらFirestoreからデータ取得

https://stackoverflow.com/questions/50555077/create-infinite-list-with-cloud-firestore-in-flutter

Firestoreで検索

https://qiita.com/KosukeSaigusa/items/6aaeac529475c03d7a2c#3-レシピのお気に入り機能

riverpodの使い方例

https://github.com/kenta-wakasa/riverpod_sample/blob/main/lib/views/todo_list_page.dart

dartの基礎(item ?? [])←の意味分かる?

https://qiita.com/teradonburi/items/913fb8c311b9f2bdb1dd

個人アプリ開発の参考になると思う

https://note.com/tanio0125/n/ndbcabba13e3c

テキストにリンクつけたいとき

https://cyublog.com/articles/flutter-ja/jp-richtext/

GCPでHTTPリファラーを設定したらGooglMap Place APIが使えなくたった

https://stackoverflow.com/questions/47754253/google-place-photo-returns-403-when-restricting-access-by-referer/47792843#47792843

Google map関連のAPIはキーの制限をかけると、ものによっては併用できないので注意。

https://developers.google.com/maps/faq#keysystem

特定の文字だけハイパーリンクにしたい

https://stackoverflow.com/questions/43583411/how-to-create-a-hyperlink-in-flutter-widget

デバックバナーを消す方法

MateralAppdebugShowCheckedModeBannerfalseにする

文字列のスペースを消したい

https://stackoverflow.com/questions/51508321/how-to-remove-all-whitespace-of-a-string-in-dart

https://programming-dojo.com/%E3%80%90dart%E5%85%A5%E9%96%80%E3%80%91string%E3%81%AE%E7%A9%BA%E7%99%BD%E3%82%92%E5%89%8A%E9%99%A4%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/

注意点、スペースを削除したやつを適当な変数に代入してやらないといけない

文字をコピペできるようにしたい。

あとから変えるのはめんどくさいよ。

https://api.flutter.dev/flutter/material/SelectableText-class.html

↓便利なパッケージもある

https://pub.dev/packages/selectable_autolink_text

ひらがなーカタカナ変換

http://caters.works/2018/10/dart-hiragana-katakana/

Flutter初心者におすすめの記事

https://qiita.com/okapee0608/items/9ed40d569bb06a59d12f

firestoreのバックアップ

https://qiita.com/dowanna6/items/c56a29ff796142250d6c