現役エンジニアに悩みや疑問を30分間無料で質問し放題!

【Flutter】MainAxisAlignmentの使い方|メイン軸における配列の表示指定

今回は「MainAxisAlignment」の基本的な使い方について紹介します。

MainAxisAlignmentを使えばColumn, Rowなどの配列(children)のメイン軸における表示方法を指定できます。

Columnの場合は「縦」、Rowの場合は「横」がメイン軸だよ!

目次

下準備

Column
Row

今回はColumn、Rowそれぞれに配列されている3つのContainerの表示方法をメイン軸で指定していきます。

//ソース(Column)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: Column(
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }
//ソース(Row)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: Row(
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }

MainAxisAlignmentの種類(enum)

  • start(デフォルト)
  • center
  • end
  • spaceBetween
  • spaceEvenly
  • spaceAround

start

Column
Row

配列をメイン軸の開始位置に配置します。

mainAxisAlignment: MainAxisAlignment.start

center

Column
Row

配列をメイン軸の中央に配置します。

mainAxisAlignment: MainAxisAlignment.center

end

Column
Row

配列をメイン軸の終了位置に配置します。

mainAxisAlignment: MainAxisAlignment.end

spaceBetween

Column
Row

childの間に均等の余白を作ります。

mainAxisAlignment: MainAxisAlignment.spaceBetween

spaceEvenly

Column
Row

開始位置、child、終了位置の間に均等の余白を作ります。

mainAxisAlignment: MainAxisAlignment.spaceEvenly

spaceAround

Column
Row

メイン軸方向において各childの周りに均等の余白を作ります。

mainAxisAlignment: MainAxisAlignment.spaceAround

以上です。

おすすめ記事!

  • URLをコピーしました!
目次
閉じる