Flutter入門

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

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

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

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

Columnの書き方

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

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

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

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

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

パラメータ内容
center中央寄せ
start上寄せ
end下寄せ

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

パラメータ内容
center中央寄せ
start左寄せ
end右寄せ

Columnを実装してみる

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

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

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

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

まとめ

いかがでしたか?

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

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

最新のFlutterの勉強方法 まとめ

Flutterを入門から実践レベルまで一通り学習できる方法をまとめました。

Flutterの勉強方法を知る

Flutterを動画で学習する

Flutterを書籍で学習する