Zenn
📚

【Flutter Widget of the Week #25】Alignを使ってみた

2022/11/21に公開
Flutter
初心者
align
tech

はじめに

Flutter Widget of the Week #25 Align についてまとめましたので、紹介します。
https://youtu.be/g2E7yl3MwMk

Align

今回紹介する Align は親widget の中で定めた場所に 子widget を配置したい時に効果的な widget です。
例えば Container widget の中で Text widget を中央に配置したり、右下に配置したい場合はContainer の中で Align widget を使い、alignment プロパティに Alignment.center （中央に配置）や Alignment.bottomRight （右下に配置）を指定することで実現できます。

Container(
  child: Align(
    alignment: Alignment.bottomRight,
    child: Text('Hello'),
  ),
),

また、 Align は Stack の中での配置にも利用できます。
では、さっそくサンプルを動かして使い方を見てみましょう。

Align サンプルコード

サンプルは Container（水色部分）の中に Flutterロゴ を配置したものとなってます。

基本のサンプルコード全体

class AlignSample extends StatelessWidget {
  const AlignSample({super.key});

  @override
  Widget build(BuildContext context) {
    const TextStyle style = TextStyle(color: Colors.white);

    return Container(
      color: Colors.white,
      child: Center(
      // ここから
        child: Container(
          height: 300.0,
          width: 300.0,
          color: Colors.blue[50],
          child: FlutterLogo(
            size: 80,
          ),
        ),
      // ここまで
      ),
    );
  }
}

基本のサンプルコードの Container 内を変更することで Flutterロゴ の配置を変えられます。
以下は変更部分のみ（ここから〜ここまで の部分）コードを記載してます。

Flutterロゴ を右上に配置

Flutterロゴ を右上に配置

Container(
  height: 300.0,
  width: 300.0,
  color: Colors.blue[50],
  child: const Align(
    alignment: Alignment.topRight,
    child: FlutterLogo(
      size: 80,
    ),
  ),
),

他にも 指定する Alignment によって配置を変更できます。
・右下に配置したい場合は
Alignment.bottomRight
・左上に配置したい場合は
Alignment.topLeft
・左上に配置したい場合は
Alignment.bottomLeft
・真ん中上に配置したい場合は
Alignment.topCenter
・真ん中下に配置したい場合は
Alignment.bottomCenter
・中央に配置したい場合は
Alignment.center
・中央右に配置したい場合は
Alignment.centerRight
・中央右に配置したい場合は
Alignment.centerLeft

Flutterロゴ の位置を座標系の計算で設定

Flutterロゴ を右上に配置

Container(
  height: 300.0,
  width: 300.0,
  color: Colors.blue[50],
  child: const Align(
    alignment: Alignment(0.2, 0.6),
    child: FlutterLogo(
      size: 80,
    ),
  ),
),

Alignmentクラスは、Containerの中心に原点を持つ座標系を使用します。
位置としては

(x * 子要素の幅/2 + 子要素の幅/2, y * 子要素の高さ/2 + 子要素の高さ/2)

の計算結果が子要素を配置する場所となります。

このサンプルでは xが0.2 yが0.6 となり、子要素であるFlutterロゴのサイズ（縦横両方とも）を
80としているので、位置は
(0.2 * 80/2 + 80/2, 0.6 * 80/2 + 80/2)= (48.0, 64.0)
となります。

Flutterロゴ の位置を FractionalOffset で設定

Flutterロゴ の位置を FractionalOffset で設定

Container(
  height: 300.0,
  width: 300.0,
  color: Colors.blue[50],
  child: const Align(
    alignment: FractionalOffset(0.2, 0.6),
    child: FlutterLogo(
      size: 80,
    ),
  ),
),

FractionalOffsetクラスは、Containerの左上隅に原点を持つ座標系を使用します。
位置としてはまず2つの点を計算します。
①Containerの座標系です。

(x * 子要素の幅, y * 子要素の高さ)

②Alignウィジェットの座標系

(x * Alignの幅, y * Alignの高さ)

そして ②-① した計算結果が
の計算結果が子要素を配置する場所となります。

このサンプルでは xが0.2 yが0.6 となり、子要素であるFlutterロゴのサイズ（縦横両方とも）を
80、Alignの幅と高さを300としているので、計算は
① (0.2 * 80, 0.6 * 80) = (16.0, 48.0)
② (0.2 * 300, 0.6 * 300) = (60.0, 180.0)
よって位置は
(60.0, 180.0) - (16.0, 48.0) = (44.0, 132.0)
となります。

Align のプロパティについて

Align にはプロパティが少しありますので、紹介します。

(new) Align Align({
  Key? key,
  AlignmentGeometry alignment = Alignment.center,
  double? widthFactor,
  double? heightFactor,
  Widget? child,
})

①widthFactor

null 以外の場合、横幅をその子の幅に、この係数を掛けた値に設定する
1.0 より大きくても小さくても構わないが、負でない必要がある
型は double 型

②heightFactor

null 以外の場合、高さをその子の高さに、この係数を掛けた値に設定する
1.0 より大きくても小さくても構わないが、負でない必要がある
型は double 型

最後に

今回は Align を紹介しました。配置を指定するのに Align はよく使うので覚えておいて損はない widget だと思います。使ったことがまだない方は是非お試しください！
次は #26 Positioned です。またお会いしましょう。

参考記事

https://api.flutter.dev/flutter/widgets/Align-class.html

Discussion