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

208

本

Flutterにスーパーパワーを授ける！「Flutter」は、美しいUIのスマホアプリを製作できるフレームワークです。その「Flutter」をローコードで利用できるようにしたのが… もっと読む

運営しているクリエイター: 松井真也＠登録セキスペ

【FlutterFlow】テキストウィジェットに変数を表示…できなかった件

前回記事の続きです。前回は、Firestoreにあるデータをアプリ上で表示させるために、ウィジェットの設置をしました。加えて、そのColumnウィジェットとバックエンド・クエリを紐づける設定もやりましたね。今回は、そのテキストの表示を調整します！具体的には、Merchコレクションのnameフィールドを表示させます。レッツゴー！分裂したHello Worldは何もの？前回記事では、下図の表示が得られるところまでやりました。HelloWorldが４つに分裂している

【FlutterFlow】バックエンドからテキストを表示させるには？

前回記事の続きです。前回は、Firebaseでメール認証の設定を完了し、FlutterFlowのコレクションにフィールド値を取り込めました！なんとかなった。一時はどうなるかと…。今回は、コレクションの設定に戻って、データをアプリ上で表示させる設定を、こんどこそ再開します。レッツ・ゴー！リスト表示に使うウィジェットは、これだ！まずは、前回の振り返りですが、Firebaseとの接続が完了して、下図のとおりMerchコレクションのNameフィールドの値３つをFlutte

【FlutterFlow】またエラーでも大丈夫！メール認証の壁も突破する

前回記事の続きです。前回は、Firestoreセキュリティルールを完成させました！自信はないけど、これでいいはず。今回は、コレクションの設定に戻って、データをアプリ上で表示させる設定を再開します。今度こそ、うまくいくかな～、レッツ・ゴー！コレクションの設定を再開！コレクションの設定をいったん離れて、2回ほどセキュリティの話をしてしまったので、中断したところを振り返ります。コレクション「merch」の設定で、フィールド値を入力したところ、次のように「Firest

【FlutterFlow】創業者の二人がFlutterFlowをやさしく解説

前回記事では、FlutterFlowの創業者について、紹介しました。 AlexもAbelも、Ycombinatorに支援され、Googleで働いていたスーパーエンジニアでしたね…。なんだか、キレッキレのおっかない人たちなのかな、、とか想像しました。が！次のFlutterFlowの紹介ビデオを見ると、その印象が覆りますよ～。創業者のAlexとAbel二人でFlutterFlowの紹介をしています！（英語です）なんだ～、親しみやすいお兄さんたちじゃないですか～。頭キレキ

【FlutterFlow】FF以前の「Flutterって何？」

FlutterFlowを使ってみたくていろいろ調べています。前回記事で、FlutterFlowの対象ユーザーが、「Flutter開発者」であることが分かりました。では、、、、「Flutterって何よ！？」ということになりますね。これについて、未経験者の私がまとめる立場にないことを知りつつも、ネット上の各種解説を参考にして、あえてまとめたいと思います。だって、素人の説明の方が分かりやすいこともあるでしょう？ということで、いってみましょう。超優秀なアプリ制作の「基

【FlutterFlow】まずは触ってみよう！クールなインターフェースにワクワク感

これまで、共同開発者の紹介や、FlutterとDartとは何かなどを見てきました。「いい加減、本題に入れよ」という声が聞こえてきます（私の中でｗ）。そうですね、実際使ってみましょう。使わなければイメージ湧かないですよね。まずはFlutterFlowのアカウント取得次のリンクからFlutterFlowのトップページを開きましょう！ Start for Freeをクリックします。その後、個人情報などを入力してアカウントを取得します。が、Googleアカウントを使って

【FlutterFlow】1分ですぐにわかる！UIビルダーの全体像

FlutterFlowのチュートリアルを参考にアプリを作り始めています。前回記事で、データベースはさせておき、UIビルダーにたどり着きました～。では、深入りする前に全体像をばくっとつかまなくてはいけないですね。今回は、FlutterFlowのUIビルダーの全体の構成を見てみることにしましょう。大きく4つのエリアで構成では、次の画像は、FlutterFlowのUIビルダーです。大きく４つのエリアに分かれています。それぞれどんな役割があるのか簡単に見てみますよ～。

【FlutterFlow】ナビゲーションメニューの概要を掴め

FlutterFlowのUIビルダーをもう少し眺めてみましょう。画面左に「ナビゲーションメニュー」がありますね。これも重要そうだ。これも確認が必要ですね。上側がフロント、下側がバックの設定ナビゲーションメニューは、大きく上下に分かれています。上側が、「Build」というカテゴリーです。ここは、アプリのUIを作り込んでいくときに選択して開くメニューですね。一方、下側のカテゴリーは、「コネクト」です。データベースの連携や、APIの連携の設定に必要そうなメニューです。

【FlutterFlow】３つの方法でウィジェット追加！

FlutterFlowのチュートリアルにそって、FlutterFlowを試しています。前回記事までに、UIビルダーの概要をつかみました。いよいよ、少しずつUIビルダーで実際に操作していきます。既存のウィジェットを削除では、ウィジェット・ツリーを開いて、今設定されているウィジェットを再確認します。 HomePageというページに、３つのウィジェットがあります。せっかくFlutterFlowさんが自動でおいてくれたウィジェットですから活かしたいですね！が、削除します

【FlutterFlow】ページ追加！テンプレートを活用しよう！

前回記事の続きです。チュートリアルを参考に、FlutterFlowの使い方を学んでいます。前回までの記事で、ウィジェットの追加方法を学びました。そして、今回はページ追加です。果たしてFlutterFlowでは、どのようにページを取り扱うのでしょうか？ウィジェットはいったん削除まずは、Textウィジェットを削除します。下図のウィジェットを選択してDeleteボタンを押します。このウィジェットは、ただの練習用だったようですｗ。チュートリアルの内容が現在の仕様と異な

【FlutterFlow】ウィジェットの階層が「底無し」に思えた件

前回記事の続きです。前回は、FlutterFlowでテンプレートの新規ページ「Categories」を追加しました。すると、下図のように、たくさんのウィジェットが設定されています。あまりにも多くてびっくりします。いったいこれをどう扱えばいいのでしょう！？実は、ウィジェットは親子関係をもっているので、その構造を最初に把握するのがよさそうです。というのも、私たちは、FlutterFlowでUIを作るのに慣れていません。まずは、テンプレートを参考にしてウィジェットを

【FlutterFlow】コンテナの幅の設定が面白かった件

前回記事からの続きです。チュートリアルに従い、FlutterFlowでUIビルダーの使い方を試しています。前回記事では、テンプレートのウィジェットがどのように構成されているかを確認しました。結構、階層が深かったですね～。今回は、空白ページでコンテナ（エリアを区切るウィジェットの一つ）の設定をしてみます。まだ手を付けていないブランクの「HomePage」というページに戻ります。下のとおり、まだ何もしていません。さあ、ここに手を加えていきます！画像をスクロ

【FlutterFlow】色のインポートは、「Coolors」で！

前回記事からの続きです。FlutterFlowのUIビルダーを使用する練習をしています。前回は、コンテナ・ウィジェットを設置して、サイズ調整までしました。今回は、、、色のテーマ設定です。自分でテキトーに色を決め手は、アプリの色味がおかしくなっちゃいますから、大事な設定です。この色のテーマ設定がなかなかスマートなのだ！さっそく見てみましょう！ギア・アイコンから設定画面へ色のテーマ設定は、どこでやればいいでしょうか。ナビゲーションメニューの一番したにギア・アイコンがあ

【FlutterFlow】画像をスクロールするアプリを作るぞ！

前回記事からの続きです。FlutterFlowのUIビルダーを使用する練習をしています。前回は、UIで使用する色やフォントのテーマ設定をご紹介しました。今回は、いよいよページビュー・ウィジェットの設定をします！。画像をスクロール表示させることができるウィジェットです。楽しみですね～♪では、いってみましょう！コンテナの背景色をセットページビューの話に先立って、コンテナの背景色をセットしておきましょう。Black（#000000）に設定します。はい、黒くなりました