【Flutter】Widget を下寄せして配置する4種類の方法

Text や Image、Column のような Widget を下寄せして配置する方法を4種類紹介します。ここでは、下寄せにして配置することを例にしていますが、上寄せや左右寄せなどにも応用できます。

Container 内の Widget を下寄せ
Column、Row を下寄せ
一部の Widget だけ下寄せ
Widget を下寄せして固定
まとめ

Container 内の Widget を下寄せ

Container の alignment に Alignment.bottomCenter を指定することで、Container の子Widget を下寄せすることができます。Alignment.bottomRight を指定すると右下、Alignment.bottomLeft を指定すると左下に寄せることもできます。

Container(
  alignment: Alignment.bottomCenter,
  child: …
}

以下の使用例では、子Widget の ElevatedButton を下寄せして配置するようにしています。

body: Center(
  child: Container(
    alignment: Alignment.bottomCenter,
    width: 200,
    height: 400,
    color: Colors.yellow,
    child: ElevatedButton(
      child: Text("button"),
      onPressed: (){},
    ),
  ),
),

Column、Row を下寄せ

Column の mainAxisAlignment に MainAxisAlignment.end を指定すると、Column を下寄せすることができます。

Column(
  mainAxisAlignment: MainAxisAlignment.end,
  children: …
)

Row の場合は、crossAxisAlignment に、CrossAxisAlignment.end を指定することで下寄せできます。

以下の使用例では、ElevatedButton を並べている Column を下寄せしています。

body: Column(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    ElevatedButton(
      child: Text("button1"),
      onPressed: (){},
    ),
    ElevatedButton(
      child: Text("button2"),
      onPressed: (){},
    ),
    ElevatedButton(
      child: Text("button3"),
      onPressed: (){},
    ),
  ],
),

一部の Widget だけ下寄せ

Column の中の一部の Widget を下寄せしたいときは、以下のように、Expanded の子Widget に下寄せしない Widget を指定して、Expanded の次に下寄せする Widget を指定します。
Expanded で可能な限りExpanded の子Widget のサイズが広がるので、Expanded の次に指定した Widget が下の方まで追いやられる形となります。

Column(
  children: [
    Expanded(
      child: 下寄せしないWidget
    ),
    下寄せするWidget
  ],
)

以下の使用例では、Column で3つの ElevatedButton を並べていますが、最後の ElevatedButton だけ下に寄せています。

body: Column(
  children: [
    Expanded(
      child: Column(
        children: [
          ElevatedButton(
            child: Text("button1"),
            onPressed: (){},
          ),
          ElevatedButton(
            child: Text("button2"),
            onPressed: (){},
          ),
        ],
      ),
    ),
    ElevatedButton(
      child: Text("button3"),
      onPressed: (){},
    ),
  ],
),

Widget を下寄せして固定

Widget を下寄せ固定で配置したいときは、Stack を使用します。Stack は、Widget を重ねて配置するときに使用する Widget です。
以下のように、Stack の最後に Container を用意して alignment に Alignment.bottomCenter を指定し、子Widget に下寄せ固定する Widget を指定します。このようにすることで、画面下まで Widget があっても、その上に重ねて常に画面下に固定表示できます。

Stack(
  children: [
    …,
    Container(
      alignment: Alignment.bottomCenter,
      child: 下寄せ固定するWidget,
    ),
  ],
)

以下の使用例では、Column の上に、ElevatedButton を重ねて下寄せ固定しています。

body: Stack(
  children: [
    Column(
      children: [
        Expanded(
          child: Container(
            color: Colors.green,
          ),
        ),
        Expanded(
          child: Container(
            color: Colors.yellow,
          ),
        ),
      ],
    ),
    Container(
      alignment: Alignment.bottomCenter,
      child: ElevatedButton(
        child: Text("button"),
        onPressed: (){},
      ),
    )
  ],
),

まとめ

Flutter の Widget を下寄せする方法を4種類紹介しました！

Container内で下寄せ
→ alignment に Alignment.bottomCenter を指定
Column、Row を下寄せ
→ Column : mainAxisAlignment に MainAxisAlignment.end を指定
Row : crossAxisAlignment に CrossAxisAlignment.end を指定
一部の Widget だけ下寄せ
→ Expanded を使用
下寄せして固定
→ Stack を使用

以上で、【Flutter】Widget を下寄せして配置する方法まとめ は終わりです。