
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のまま、デプロイが反映されない
ちなみに上手くデプロイできていたとしたら、時間差で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
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などなど全部動かしてエラーが起きるか確認しないといけない。複雑なアプリを作ろうとしているなら気をつけてくれ。
画面遷移は何も考えずに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が使えなくたった
Google map関連のAPIはキーの制限をかけると、ものによっては併用できないので注意。
https://developers.google.com/maps/faq#keysystem
特定の文字だけハイパーリンクにしたい
https://stackoverflow.com/questions/43583411/how-to-create-a-hyperlink-in-flutter-widget
デバックバナーを消す方法
MateralAppのdebugShowCheckedModeBannerをfalseにする
文字列のスペースを消したい
https://stackoverflow.com/questions/51508321/how-to-remove-all-whitespace-of-a-string-in-dart
注意点、スペースを削除したやつを適当な変数に代入してやらないといけない
文字をコピペできるようにしたい。
あとから変えるのはめんどくさいよ。
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