FlutterFlowを動画でお勉強
いちこwata210@ノーコード研究所 CitrusAppさんが公開しているFlutterFlowの学習動画をかたっぱじからやっていってみる。
チャンネル FlutterFlow再生リスト
いちこ【初心者向け】FlutterFlowでネイティブアプリを作ってみよう。
- アカウントは作成していることが前提
- Firebaseの設定も必要
- 動画は英語画面で私の環境では日本語画面で、さらに現バージョンとはちょっとずついろいろ違うけど、なんとかそれっぽいところを探して完了。
- 動画で使われているテンプレートがない。適当にそれっぽいのを選んだけど大丈夫か？最初のバグの解消とか、バグ出てこなくてやらなかったんだけども。
- 1回目、ビルドしてもサインアップの画面が背景しか出てこない…。テンプレートがダメだったかな。一度プロジェクトを削除して、別のテンプレートを選んで再実行。出てくるようになった。
- でもCreateAccount押しても遷移しない。まぁええか。
- と思ったけど、次のユーザー作成もされてなかったからやっぱダメだわ。何回かやり直しする。
- CreateDocumentのcollectionのところが「UNSET」になっていたから、「users」に変更する。
- ログインできたが、Firestore Data Managerにデータが出てこない。Firebaseで見るとデータがあるので連携ができてないっぽい？エラーが出てる。「Could not create an account as firebase@flutterflow.io to your Firebase project.Make sure "Email Sign-In" is turned on for your Firebase project, and try again.」
- Firebaseプロジェクトでfirebase@flutterflow.ioのアカウントレコードを削除したら出るようになった。こちら参照
- Homeに設定したテンプレートが結構違う。でも同じのなかったから、勝手にコンポーネントとか追加してみた。とりあえずそれなりのものができたので完了とする。
感想
1年4ヶ月前のコンテンツで、すでにいろいろと仕様が変わっているところがあり、初めてやるにはちょっと難しかったかも。でも雰囲気は掴めたし、今の時点で完璧なものは必要ないからよしとする。
でもまだ楽しさが分からないかな…(笑)
いちこFlutterFlowでチャットアプリを作ってみよう。
- Firebaseの設定で「firebase@flutterflow.io」を追加するやつ、前回もやったんだけど、私の環境だと日本語だからちょっと探しにくいんだよね…。画像貼っとく。(わざわざ英語に言語設定変更する気はないｗ)
- FlutterFlowにチャットページのテンプレートがない…。けど、Flowsというところに何かチャットに必要なページとかコンポーネントとかまとめてあるテンプレートがあったので、それを利用。
- ちゃんとデータベースにテーブルも追加されていたのでホッ。
- HomePage以外はほぼテンプレートのままでできました。
感想
前回は動画と現仕様とのギャップに苦しんだけど、今回は現仕様が便利すぎた。動画との差異を確認しながらだけども、UIやデータのいろんな設定をしなくていいのはホント楽。
ただ、FlutterFlowを理解するためには本当は一から作った方がいいのかもしれない。でも楽にやるためのツールだから楽な方でやろう。
いちこFlutterFlowでAPIを使ってみよう。
- 最初テキストフィールドを普通にテキストで作ってしまった。
- JSONの書き方が、現仕様ではReccomendでサンプルがあってめっちゃ親切！
- わー。1回目のビルドでは「nullnullnull」になっちゃった…。
- 原因は、パラメータを送るところで「Widget State」じゃなくて「Widget Focus State」を選んでいたから。何も考えないで見てるから…。
感想
単純なAPIの設定で取得できることが分かった。かなり楽。
何を選んだらいいかは分からないまま動画の通りに進めているので身についている感覚はない。このパラメータは何のときに使うのかなーとか思いながら見てる。まぁとりあえず正常動作すればいい。たくさんありすぎて覚えられないし。
いちこFlutterFlowでSNSアプリをゼロから作ってみます①【初心者向け】
- Homeのテンプレート、似たのが毎回なくて困る…。今回もあとからページを追加することにして、FlowsのNotificationsを選んだ。
- 動画と違うのはユーザー情報がコンポーネントでまとめられているところとか、ラップの種類とか。
- ちょっと進めてたら合わせるのがめんどくさくなってきた。ListViewを作り直した方が早いかも。
- 結局コンポーネントからコピペしたりして作り直した。
感想
考えてみたら今まで作ったプロジェクトからページをコピーした方が早いのかも？？
いちこFlutterFlowでSNSアプリ② コンテンツ登録（記事投稿）機能【初心者向け】
- またサインアップ画面が動かないの選んでしまってた…。
- テンプレートにないUI作るのが無駄な時間に感じる。慣れるためにはいいのかなぁ。
- データベースと表示要素の付け合わせがよく分からないときあるけど、動画のエラーも同じだからちょっと安心？
感想
動画と同じテンプレートがないので苦労するが、いろいろ違う方法を試したりするのも大事かな、ということでそこは前向きにとらえよう。とりあえず最後まで同じ挙動で通してできている。
いちこFlutterFlowでSNSアプリ③ いいね機能【初心者向け】
感想
今回は簡単でした。
いちこFlutterFlowでSNSアプリ④ 詳細画面、画面感でのパラメータの受け渡し【初心者向け】
感想
同じテンプレートあったので超楽ちん！ほぼノーストップで終了しますた。
いちこFlutterFlowでSNSアプリ⑤ 編集機能【初心者向け】
- imageタップした時のアクションでエラーが出てたのは、ページをコピーして一番下のNameがかぶっていたからっぽい。Name消してみたら自動設定でユニークなNameを設定してくれた。
- 本当はイメージだけじゃなくてタイトルも説明も入力しなかったときの処理がいるよねー。空欄でも更新できるから。今後UIの方でエラー出すのかな？必須チェックとか。
感想
レイアウトのやり方が分からなくて手探り状態。まぁ、ソースなんて見もしないし、見た目それなりなら大丈夫だろう…。ええねん。
いちこFlutterFlowでSNSアプリ⑥ Conditonal Visibilityで編集ボタンの出しわけ【初心者向け】
感想
簡単ですた！
いちこFlutterFlowでSNSアプリ⑧ バリデーション（エラーチェック）について【初心者向け】
- あ、ここでやるのかエラーチェック。
- Formの突っ込み方で戸惑う。外に作って、入れたいのを突っ込むのね…。
- Create Contentsしかやってないんだけど、Edit Contentsはやらなくていいの？本当だったらバリデーションまでやってからコピーした方がよさそうだとおもた。
感想
割と直感的に設定できるので助かる。
いちこFlutterFlowでSNSアプリ⑨ マイページとプロフィール編集
- 動画ではHomeでShowしただけで良かったけど、やってみたら「2ページ以上でShowしないとダメよ！」って怒られたので、HomeとMyPageでShowした。（動画では多分、選んだテンプレートでShowするようになってるからエラーが出ないんだと思う）
- 1回目、Saveボタンを押しても何も起こらなかった…。あと、AppBarのところに「BOTTOM OVERFLOWED BY 16 PIXELS」って警告が出てる。あと、画像アイコンの上下が切れてる。
- うーん、見直したけど分からないなぁ。別のテンプレートで作り直してみようかな。
- 結局同じテンプレートで作り直し。AppBarのRowに設定してあるPaddingの8を消したら、警告のピクセル数が16から8に減ったので、この辺がおかしいみたい。Columnに設定してあるPaddingの14を6に変えたら出なくなった。
- 2回目、データ更新の挙動は上手くいっている。画像アイコンの上下が切れているところだけ。縦長の画像を使うとちゃんと表示されているのだが。横長だとなんか上下が切れる。
感想
結局2回目上手くいったのはなんだったんだろう。警告のせいだったのかなぁ。画像アイコンは今回はスルーすることにした。
いちこFlutterFlowでSNSアプリ⑩ ドロップダウンリストから都道府県を選択
- 都道府県名はAPIで取ってくると思ってた。テーブルで管理するのねん。
- DBと連携させたら勝手にドロップダウンリスト作ってくれるの？便利～。
- と思ったら、やっぱり違ったｗそうだよね、なんで名前だけ取ってこれるんだろうって思ったんだ。
- なんか、ドロップダウンリストが正常に表示されない。スクロールしたら空欄になる。空欄選択したら名前が出てくるから、表示の問題っぽいんだけど。分からん。まぁいいや今回は…。
感想
ウィジェット追加でスタイルのコピーとかできたらいいのにな。テーマの選択とかでできそうだけど。どうでもいいが、動画の後ろでときどき聞こえるお子さんの声がかわいい…癒される…。
いちこFlutterFlowでSNSアプリ⑪ ユーザー一覧・ユーザー詳細
- ユーザー詳細画面でDB連携したときに、最初Imageで設定してしまったから、ユーザー名とかでは参照できなくて、あれ？って思った。ページに設定したらちゃんと出てきた。
- ユーザー詳細画面はプロフィール画面を複製して作ったけど、UI変わること考えたらプロフィール画面を再利用した方が実際には効率よさそうだなぁ。
- 動画と違うエラーと警告が出てた。エラーはNavBarのエラーだったから、とりあえず非表示にした。警告は「Multiple primary scrollable widgets nested within each other. Typically only one should be set as primary.」警告押すとColumnに飛ぶ。ListViewにはスクロール設定するところなかったけど、自動で設定されているのかなぁ。と解釈して、Columnのスクロール設定を消したらなくなった。
- ×ボタンなかったので、MyPageとUserProfileに追加。どちらもAction設定したが、UserProfileはバックできるのに、MyPageはバックできない。なぜだ？？
- 動画ではMyPageに×ボタンなかったから消した。NavBarがあるからかなぁ？分からん。
感想
DB連携にだいぶ慣れてきた気がする。見なくてもサクッと設定できた。パラメータの渡し方とか、なんとなく感覚でやってたけど、型を作って実際のデータを渡すとか、ページ全体にデータを持たせるとか、その辺りにピンとくるようになった気がする。気がするだけかも(笑)
いちこFlutterFlowでSNSアプリ⑫ フォロー機能（follow、unfollow）
- Stackで配置したボタンのConditions設定するところで、SecondValueにSpecificValueが出てこないんだよなー。多分なくなった？
- なんでかビルド後の動作テストシーンなかったけど、動かしてみた。
- 1回目、Followボタン押してもボタン変わらない。スナックバーも出ない。前のページに戻ってまた表示するとUnFollowボタンに変わってる。UnFollowを押してもボタン変わらない。前のページ戻ってまた表示すると、今度はUnFollowボタンのまま。ふー…。
- どこかの動画で解説あるかな…とりあえずこのまま進めちゃおう。
感想
動作テストしてなかったから自分で見てみたけど分からなかった。のちの動画に期待。
いちこFlutterFlowでSNSアプリ⑬Conditonalで条件分岐してマイページorプロフィールページを切り替えよう
感想
すんなりいきました！
いちこFlutterFlowでSNSアプリ⑭コメント機能を作ってみよう。
- テンプレート同じのなかったからいろいろ探したけど、コメント入力欄はホントになくて1から作った。設定したいプロパティがなかなか見つからない。疲れた。
- 数日置いたらDB連携がまた分からなくなったｗ
- またプライマリースクロール出たんだけど、ListViewじゃないのね、結局。親Columnにだけスクロール付けたわ。
感想
ColumnとRowとContainerの差し込みが思うようにいかなくて疲れた。背景色はRowには設定できないのね？その辺も修行だと思って頑張る。
いちこFlutterFlowでSNSアプリ⑮レビュー／評価機能を作ってみよう-1
- UI一緒に作ってるからめっちゃスムーズ！
- ビルドしたら表示に警告出まくり。まぁ何も考えてないからな…。
感想
ふむ。なるほどなーという感じです。
いちこFlutterFlowでSNSアプリ⑯レビュー／評価機能-2：評価登録
- ActionのBackendCallでQueryしてたけど、前ページからのパラメータだけで十分じゃないのかなぁ？私はそうやってみたけど、普通に動いた。
- レビュー一覧を日付順にしたくてOrder条件を入れたらなんでか複合インデックス作っちゃって、エラーが出て表示されなくなって、条件削除してもインデックス直接削除してもエラーが直らなくてやる気なくして数日放置してた。頑張って戻ってきた。
- ListViewのBackendCallからやり直し、Order条件付けたらまたエラーになったのでもうソートは諦めた。
感想
どうしたら良かったのかなぁ。今後の動画で出てくるかしら…。
いちこFlutterFlowでSNSアプリ⑰Custom Functionで評価の平均を出す：AIでコードを自動生成
- お？急にプログラミングっぽい？
- えっ、もうプログラミングしなくていいじゃん。AIやってくれるの便利～。助かる～。
感想
もうDart知らなくてもプログラミングできるじゃん！プログラミングやったことない人には難しいかもだけど、他の言語知ってれば全然知らなくてもできる。えー、ありがとう。まぁ考えてみたら私、Excel関数もJavascriptもSQLもAIに聞いてたわ…。
ところで私、ずっと「raiting」って書いてた。最初に間違えておかしいなって思いながらやってた。全部やり直そうかな…。
いちこFlutterFlowでSNSアプリ⑱検索機能を作ってみよう：App Stateでローカルに変数を持つやり方も。
- あれ、再生リストに⑱入ってない？
- なんとなくそれっぽくできたけど、検索結果に信ぴょう性がないっていうか…。ちゃんと期待通りのリストを取ってきてくれるときもあれば、そうじゃないときもあってよく分からない。あとやっぱりListViewを二つに分けて表示・非表示で対応しているのが非効率な感じがする。
- そういえばようやくPrimaryのスクロールがどうとかわかった。ListViewにPrimaryって設定項目があった。多分これでスクロールのPrimary属性がかぶってしまってるんだわ。
感想
今回はあまり深く考えずにそれなりにできたということでよしとしよう。
いちこFlutterFlowでSNSアプリ⑲ヒーローアニメーション(hero animation)を使ってみた。
FlutterFlowでSNSアプリ⑳アニメーションの設定（Fade、Slide、Scale、Rotate、Shake、Blur、Satur
感想
Tipsみたいな回でした。
いちこFlutterFlowでSNSアプリ㉑複数項目でリスト検索（simple searchを使わずにcustom functionで検索）
- CustomFunction作ったところまでは良かったけど、そのあとワケワカメになってしまったので休憩する。
- 1日置いたらすんなりできた。あるある。
感想
なるほどなー。いろんなやり方が考えられるな。実装方法はケースバイケースだろうな。
いちこFlutterFlowでSNSアプリ㉒検索機能：チェックボックスでカテゴリを複数選択
- またDB連携でインデックスが作られてしまった…。もうそういう仕様なのかな？とりあえずそのままDeployしてみて、表示に問題なかったからそういうことにする。
感想
犬と食べ物の写真しかアップしていないことに気付いた(笑)テストデータとしてどうなんだろう。まぁええか。
いちこFlutterFlowでSNSアプリ㉓ドロップダウンリスト（dropdownlist）で検索
- 前回と同じようにフィルターかけようとしたらできない。なんで？と思ったら、Inじゃない、EqualToなんだ。ドロップダウンだから選択肢1個なので。なるほど。
感想
たくさん検索ページが増えていくんだけどｗまぁ見えてなければないのと同じか。
いちこFlutterFlowでSNSアプリ㉔日付で検索（日付フォーマットの変換はAIでcustom codeで）
- ListViewに新しいフィルターを追加するとエラー。Assertion Failedって出てきた。やっぱりインデックスが悪さしてるっぽいなぁ。FlutterFlow上ではインデックスをDeployしないとエラーでビルドできないから、とりあえずDeployしたあとFirebaseの方でインデックスを直接消した。するとエラーなく動いた。
- 動画では日付のフォーマットをCustomFunctionでやってたんだけど、おそらく仕様変更でフォーマットに「Custom」が追加されている。『yyyy/M/d HH:mm』と設定したら上手くいったからCustomFunctionを使った方法はスルーした。
感想
Firebaseとの連携の問題までは分からないよ…！なんとかごまかしつつやってる感じ(笑)
いちこFlutterFlowでSNSアプリ㉕Algoliaで全文検索
感想
動画が途中で終わっているので飛ばします。
が、Algoriaとは外部のサービスで、Firebaseに拡張機能としてインストールして使うもののようで、Algoriaのことをよく分からないまま進めてしまうことに若干の不安がありました。今回はスルーして正解かな。アカウントを削除しました。
いちこFlutterFlowでSNSアプリ㉖GoogleMapを使って地図表示（single、multiple、指定した位置を真ん中に）
感想
GoogleMapsPlatformの使い方を学ぶ感じ。
いちこFlutterFlowでSNSアプリ㉗簡単なEC機能を作ろう-1（商品一覧、詳細、登録画面の作成）
-
今までの復習みたいな感じで、一覧、詳細画面、登録画面を作っていった。
-
エラーが出てる。なんだろう？Firebaseからメールでいろいろ来てたやつかなぁ。
-
UserCollectionの権限を変えたら解決するよってポストを見たので試してみたら直った。
感想
画面が増えて遷移が大変ｗもうナビバーから行ってるけど。
いちこFlutterFlowでSNSアプリ㉘Stripe（ストライプ）でクレカ決済してみよう。
- 簡単なAPIの設定とパラメータで決済できるの便利ー。
感想
簡単でした。
いちこFlutterFlowでSNSアプリ㉙簡単！グループチャット機能を作ってみよう。
- 前作ったのとは違うのかな？わざわざもう一回作るの？？
- UIは1画面ずつ用意するみたいだけど、今はFlowsってテンプレ群でオールインワンでセットが置いているからそれを使ったらもっと便利。『Chat＋Group（Threads）』を選択してみた。
- とりあえずページの名前は一緒にしておいた。でもグループ招待のページだけコンポーネントなんだよね…。あんまり使い方分かってない。最悪コピペでページに貼るつもり。
- AllChatsPageのボタンもアクションもすでに設定済みなので、動画見てるだけ…。
- InviteUserでは、アクションの設定が違うようだ。うーん、でもそのままにしとこう。
- テンプレではChatPageでユーザーを追加するときに、ページでなくコンポーネントを呼び出してるんだな。確かにその方がスマートそう。
- 動作確認では若干変なところもあるけど、まぁ動いてそう。
- 急に別ブラウザで動作確認するじゃん！？
感想
ほとんど何もすることなく。テンプレート追加するだけでできました。
次回1時間越えなのマジか…。
いちこFlutterFlowでアプリ開発㉚簡単なカート機能付きECアプリを作ってみよう：フルバージョン