FlutterFlow基本操作

アプリの動作確認とソース表示方法

前回、FlutterFlowの概要とアプリ制作の流れを書きました。
今回は基本的な使い方について紹介します。

アプリをテストするためには初期設定が必要ですが、それは改めて掲載します。
まずは画面に慣れてもらうのが良いと思います。

ウィジェットを配置する

左端に縦にメニューが並んでいて、上から3つ目がウィジェットを配置する画面になります。

画面は大きく3つの領域があります。

1. ウィジェット（コンポーネント）
2. アプリ画面
3. ウィジェットの設定

最初はウィジェットを自由にアプリ画面に並べてみると良いと思います。
その際、ColumnやRowなどのレイアウト要素を先に置くと配置しやすくなります。

レイアウト要素は下の方にあります。上の検索ボックスで探しても良いと思います。

プレビューを表示する

いくつかウィジェットを配置したら、プレビューを表示させて画面を確認します。
アクションをつけてあるとよりアプリのイメージを持ちやすいと思います。

ソースコードを表示する

ソースを確認したい場合は、下記から表示させられます。

画面中央に画面ごとのソースが書かれています。

右側にアプリ画面がありますが、ウィジェットをクリックするとそのウィジェットだけに絞り込みもできます。

右上にソースのダウンロードボタンがありますが、有料プランではないとダウンロードできません。

以上、基本中の基本の操作の紹介だけになりましたが、先々、少しずつ掘り下げて紹介したいと思います。