こんにちは。またまたFlutterFlow（フラッターフロー）で新機能がでました。「walkthroughs」という機能で、はじめてそのアプリを使う人に「このボタンは〇〇のために使います」「〇〇を見たい人はこのアイコンをクリックしましょう」のような解説をできる機能です。
具体的に以下のような感じです。
かっこいいですよね！これが簡単に作れます。
今回はこのFlutterFlowの新機能・Walkthroughsについて解説していきたいと思います。
FlutterFlow新機能：Walkthroughsの使い方
まずはSetting and IntegrationsからWalkthroughsを選択します。
Create Newを選らんで新規に作りましょう。
以下のようにnameを決めて、対象のPageを選択します。
あとは、WalkthroughのStepをどんどん追加していきます。
各ステップでは、まずWidgetを選択します。すると、右側のプレビューでWidgetを選べるようになります。選んでConfirmします。
次に、contentを選びます。このcontentとはウォークスルーするときに表示されるコンポーネントのことです。以下みたいなやつですね。
それを選択します。まだ作ってない人は好みのコンポーネントを作りましょう。その際にはパラメータを渡せるので、コンポーネント側で表示させたいパラメータを用意しておきましょう。（説明のテキストや画像など）
他にも細かい設定はありますが、だいたいこんな感じです（細かいところは動画で解説していますので参考まで）
画面のOn Page Loadアクションでwalkthroughを開始
あとはウォークスルーをスタートするだけです。On Page Loadアクションでwalkthroughを選択しましょう。
これだけです。簡単ですね！
あとは、こういうチュートリアルは1回目しか表示させないのが一般的なので、どこかにフラグなどを持ち2回目以降は表示させないような制御も必要ですね。ぜひ試してみてください。
Youtube動画での解説はこちら
FlutterFlowのWalkthroughsについて動画でも解説してみたので詳しくはこちらをどうぞ。
アプリ・Webサービスの開発の無料相談はこちら
FlutterFlow、Adalo、bubble、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。