FlutterFlow | ローコードで本格アプリ製作 - 2023-02｜松井真也＠登録セキスペ

【FlutterFlow】できた！ボタンをタップしてドキュメント追加

FlutterFlowでのアプリ開発、楽しんでますか？私は、苦悩していますｗ。FlutterFlowは、ちょっと難易度が高いですよね…。毎日のようにブログにするのは、かなりしんどいです。が、今回は、メッセージを送るアクションに挑戦し、なんとかうまくいったので紹介します。正確にいうと、ユーザーがテキストを入力したあと、ボタンをタップしたときに、ドキュメントが追加されるようにします。公式ドキュメントに詳しい方法が見つけられず、断片的な情報をもとにチャレンジしてみました

【FlutterFlow】４つのステップでページ間のデータ送信

前回記事まで、サブコレクションを使ってチャットルーム・アプリの製作について紹介してきました。前回、サブコレクションから値を受け取るために、パラメータ定義とパラメータ値の送信を設定する必要があることが分かりました。これを解決するため、FlutterFlowの公式ドキュメントや、コミュニティ、FlutterFlowのYouTubeなどを漁ったのですが、どうにも解決できません。これは、まさに私の力不足です。ですので、サブコレクションを使ったアプリ製作については、保留させ

【FlutterFlow】サブコレクションへのクエリ設定もデータのパスが必要だった件

前回記事からの続きです。公式資料を参考にして、サブコレクションを使った簡単なチャットアプリの制作に挑戦しています！現在、メッセージ用のページの作り込み中です。前回は、メッセージ用ページにウィジェットの配置が完了しました。特に、TextFieldウィジェットと、ボタンウィジェットを設置しましたね。部品はそろいました。今回は、メッセージを表示させるために、ListViewにクエリ設定します。そう、サブコレクションと紐づけるわけです。これが本題でした。さあ、うまくいくで

【FlutterFlow】メッセージ送信に必要なウィジェットはこれだ

前回記事からの続きです。公式資料を参考にして、サブコレクションを使った簡単なチャットアプリの制作に挑戦しています！現在、メッセージ用のページの作り込み中です。前回は、AppBarとメッセージ用のエリアの設定（ListViewとListTile）ができました。戻るボタンがAppBarがデフォルトで設定できるのが新鮮でした！今回は、メッセージ送信機能を実装します。レッツゴー♪ 本ブログ初出！入力系ウィジェット現状を確認します。Messagesページには、AppBar

【FlutterFlow】なんとウィジェット不要！？AppBarに「戻るボタン」の設定が簡単だった

前回記事からの続きです。公式資料を参考にして、サブコレクションを使った簡単なチャットアプリの制作に挑戦しています！（パラメータ設定に夢中になって本来の目的を忘れかけていましたｗ）。前回の記事までで、ChartRoomsページにあるListTileウィジェットに、１）ページ遷移アクション追加、２）受信側パラメータ設定、３）送信側パラメータ設定が終わりました。結構、神経を使いました…。今回から、メッセージのページの設定に入ります！このページに実装したいのは、１）メッセージ

【FlutterFlow】3点セットで覚えよう：アクション→受信→送信設定

前回記事からの続きです。公式資料を参考にして、サブコレクションを使った簡単なチャットアプリの制作に挑戦しています！前回は、データ受信側であるCharRoomsページで、ListViewにアクション設定（ChatRoomsMessagesへの移動）しました。また、「受信側」のパラメータを定義しました。今回は、「送信側」のパラメータ設定をListTileで行います。これも復習ですね。レッツゴー♪ 受信側パラメータ設定後に、アクションメニューが変化する再び、ListT

【FlutterFlow】受信側パラメータ設定が分かる！ListTileにアクション追加

前回記事からの続きです。公式資料を参考にして、サブコレクションを使った簡単なチャットアプリの制作に挑戦しています！前回は、ListTileウィジェットにRoom名を表示させることに成功しました！チャットルームの並びが反対のままですけれども、それはさておき…。今回は、そのRoom名をタップしたら、チャットルームのページに移動できるように、アクションをつけてみましょう！これも復習になりますが、うまくいくかどうか～。レッツゴー♪ チャットができるページを作る早速ア

【FlutterFlow】ListTileの設定：Textウィジェットとここが違う

前回記事からの続きです。公式資料を参考にして、サブコレクションを使った簡単なチャットアプリの制作に挑戦しています！前回は、チャットルームのページでドキュメントのデータ（チャットルーム名）を表示させるための準備として、ListViewを設定しました。今回は、ListTileウィジェットで表示する変数の設定を行います。これでチャットルーム名を表示できるはず！レッツゴー♪ ListViewのタイトルを設定下図が、ウィジェットツリーです。赤枠のListTileを設定しま

【FlutterFlow】ListViewを使ってチャットルームを作り込み！

前回記事からの続きです。公式資料を参考にして、サブコレクションを使った簡単なチャットアプリの制作に挑戦しています！前回は、サブコレクションの基本設定をしました。また、サブコレクションを使わず、コレクションを並置させる場合との違いも確認しましたね。結構、奥が深い。そして、今回は、コレクション（チャットルームのページ用）にデータを追加したうえで、チャットルームのページを作り始めます！それではレッツゴー♪ Chat_roomsコレクションにドキュメント追加まず、現状の

【FlutterFlow】新しい挑戦を！サブコレクション作成法を紹介

前回記事からの続きです。前回は、サブコレクションとはどういうものなのか、さらに加えて、コレクションを並置する場合と何が違うのか、をご紹介しました。正直言って、データの持ち方にそんな違いがあるのか知りませんでした。新鮮！さて、今回から、サブコレクションを使って、チャットアプリを作ってみたいと思います～♪。いきなり、そんなアプリを作ろうとして大丈夫なのか～、とお思いか心配ですね。でも、大丈夫です。私の方が、もっと心配ですｗ。が、きっとなんとかなりますよ～。参考にするの

【FlutterFlow】これで分かる！サブコレクション VS コレクション並置の違い

前回記事からの続きです。前回は、CSV形式のデータをFirebaseにアップロードする方法を紹介しました。リスト形式のデータは、うまくいきませんでしたが、それを除いては、きちんとドキュメント追加することができました。さてさて、今回は、FlutterFlowの公式資料を参考に、コレクションの中にコレクションを作る、そう、「サブコレクション」を作る方法について紹介することにします。 NoSQLの仕組みは、なんともまだ慣れてないですよね。私も同じです。ここは一つ丁寧にサブ

【FlutterFlow】CSVアップロードでフィールド定義+ドキュメント追加

前回記事からの続きです。FlutterFlowの公式ドキュメントを参考に、Firestore Content Managerで、ドキュメントを追加・更新・削除する方法についてご紹介していきます。前回は、Firestore Content Managerで、すでにドキュメントがあるコレクションにCSVアップロードを行って、ドキュメント追加することを試みました。実際のところ、LIST型フィールドへの追加がうまくいかなかったのですが、その手順についてはご紹介できました。今回

【FlutterFlow】CSVアップロードのポイント紹介

前回記事からの続きです。FlutterFlowの公式ドキュメントを参考に、Firestore Content Managerで、ドキュメントを追加・更新・削除する方法についてご紹介していきます。前回は、Firestore Content Managerで一つ、ドキュメントを追加しました。これは問題なくできました。リスト型のデータもFirestore Content Managerで効率よく入力できるのは、素晴らしいと思いました！今回は、CSV形式のテキストデータから、

【FlutterFlow】もう迷わない！データ管理は、Firestore Content Managerで

しばらく「FirestoreのデータをUIに表示させる」ことをテーマに連載してきました。しかし、今回からは、、、公式ドキュメントを参考に「Firestore Content Managerで、データをいかに管理するか」をテーマにして取り組んでいきます！ UIでアプリのフロントを作り込むのって楽しいですよね。よくわかります。でも、FlutterFlowに限らずノーコード・ツールでは、データをいかに管理するかがキモです。ここを乗り越えなくては。データ管理って面倒ですか？でも、大

FlutterFlow | ローコードで本格アプリ製作

2023年2月の記事一覧