ノーコードでアプリ開発を行うFlutterFlowは、簡単かつ迅速な開発が可能なことで知られています。今回は、FlutterFlowの機能の一つであるConditionalVisibilityを使用して、ボタンの出しわけを行う方法について解説します。条件に応じて表示/非表示を切り替えることができるConditionalVisibilityの使い方を学び、より使い勝手の良いアプリを開発してみましょう。
本ページの最後の方で動画でも解説しているのでみたい方はそちらもどうぞ。
出しわけしたいボタンを選択し、右側のパネルからConditional VisibilityをONにする
まずは出しわけしたいボタンを選択します。
すると右側のパネルからConditional Visibilityがあるので、それをONにします。
ConditonのSingleConditionを選ぶ
以下のように選択します。
選択すると以下のようにFirst Value、Equal To、Second Valueが選択できるようになります。
これらを設定していきます。
今回の場合は、「記事を投稿したユーザー（このアプリの場合はpost_user）が自分と同じ場合に編集ボタンを表示する」としたいので、
以下のようにFirst Valueにcontents Documentのpost_user（user ref）を設定し、
Second ValueにAuthenticated UserのUser Referenceを選択します。
たったこれだけでボタンの出しわけができました！
簡単ですね。
Conditonal Visibility機能をYoutube動画で確認したい方はこちら
FlutterFlowは複雑なため、動画で見た方が早いことも多いため、動画にもまとめてみました。
この記事の内容は上記の動画で詳しく解説しています。興味のある方はどうぞ。
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、flutterflow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。