FlutterFlow ウィジェットの配置 レイアウト

ウィジェットを配置する

FlutterFlowでは、ウィジェットを配置してアプリを作ります。ウィジェットは1つの機能の要素で、FlutterFlowでは大きく3つに分かれて用意されています。

• Page Elements
• Base Elements
• Layout Elements

それぞれに属するウィジェットがあり、アプリに実装したい機能はどのウィジェットか想像して選択し、配置してアプリを作っていきます。FlutterFlowの良いところは、まずは配置してみて、違っていたら戻ればすぐに元に戻せます。

たくさんのウィジェットがあり、どれも試してみたいと思う気持ちがあるかもしれません。最初にレイアウトの土台となるウィジェットに慣れると、自分のイメージする配置ができるようになります。また、FlutterFlowでは、ウィジェットを重ねて配置していきます。レイアウト要素の上にベース要素を並べる、ページ要素の上にベース要素を並べる、といったものです。

ここではまず、レイアウト要素の配置について触れます。

縦にウィジェットを配置する Column

アプリを作る際、最初にウィジェットを縦に並べることを想像すると思います。そのためにはColumnを使います。Columnをドラッグアンドドロップしてアプリ画面上に配置します。これだけで縦向きに他のウィジェットを配置できるようになります。

次に、Columnの上にTextウィジェットを2つ配置します。自動的にTextウィジェットが並べられます。

このとき、何も設定していないとTextウィジェットは左上に寄せられています。真ん中に寄せたり、自由に場所を決めたくなります。これはColumnから設定できることがあります。画面左側でColumnの設定ができます。この画面は、Columnを選択している必要がありますので、アプリ画面上のColumnをクリックして表示させます。

3つの設定があり、それぞれ変更して動きを把握してみると良いと思います。例えば、画面横いっぱいに伸ばしたい場合は、Cross Axis AlignmentをStretchにします。するとColumnが横に広がります。

このような形でレイアウト要素にベース要素を重ねることを繰り返していくことになります。今回は縦のColumnの紹介ですが、横にも要素を並べたくなります。それはRowを使います。Rowの使い方は改めて紹介します。