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

【Flutter】CrossAxisAlignmentの使い方|クロス軸における配列の表示指定

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

CrossAxisAlignmentを使えばColumn, Rowなどの配列(children)のクロス軸における表示方法を指定できます。

Columnの場合は「横」、Rowの場合は「縦」がクロス軸だよ!

目次

下準備

Column
Row

今回はColumn、Rowそれぞれに配列されている3つの「装飾ボックス(Container)」の表示方法をクロス軸において指定していきます。

また、Columnが親ウィジェットの幅いっぱいに広がるために「SizedBox」で「width: double.infinity」と指定しています。

//ソース(Column)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: Column(
          children: [
            SizedBox(
              width: double.infinity,
            ),
            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: [
            SizedBox(
              width: double.infinity,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }

CrossAxisAlignmentの種類(enum)

  • start
  • center(デフォルト)
  • end
  • stretch

start

Column
Row

配列をクロス軸の開始位置に配置します。

crossAxisAlignment: CrossAxisAlignment.start

center

Column
Row

配列をクロス軸の中央に配置します。

crossAxisAlignment: CrossAxisAlignment.center

end

Column
Row

配列をクロス軸の終了位置に配置します。

crossAxisAlignment: CrossAxisAlignment.end

stretch

Column
Row

childをクロス軸に対して最大限広がります。

crossAxisAlignment: CrossAxisAlignment.stretch

以上です。

おすすめ記事!

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