【5分でわかる】オブジェクトを縦に並べる(Column)

本記事では、Flutterでオブジェクトを縦に並べる方法(Column)を解説をしていきます。

オブジェクトを縦に並べる方法

Flutterでは、Columnというオブジェクトを水平に並べるためのウィジェットが用意されていますので、そちらを使用しましょう。

Column class - widgets library - Dart API

API docs for the Column class from the widgets library, for the Dart programming language.

Columnのchildrenプロパティに縦に並べたいウィジェットを設定します。

Column(
           mainAxisAlignment: <寄せ設定>,
           children: [
             <ウィジェット１>,
             <ウィジェット２>,
           ],
         ),

その他の主要なプロパティとして「crossAxisAlignment」と「mainAxisAlignment 」があります。こちらのプロパティはオブジェクトの位置を設定する際に使用します。

mainAxisAlignmentは垂直方向、crossAxisAlignmentは水平方向に位置を調整します。

MainAxisAligmentの主要パラメータは以下の通りです。

CrossAxisAlignmentの主要パラメータは以下の通りです。

今回はTexウィジェットを縦に並べてみました。MainAxisAligmentはcenterにしています。

MainAxisAligmentをstart、endにした場合も見てみましょう

startを設定した場合、画面の上から縦に並べていく。

endを設定した場合、画面の下から縦に並べていく

いかがでしたか？

Flutterを使うとオブジェクトを簡単に縦に並べることができましたね。

しかし、Columnを実装する際はオブジェクトの位置設定が慣れないと難しいので、この機会にしっかりと理解しておきましょう。