【Flutter】レイアウトについて

Flutterは、ウィジェットを組み合わせてアプリのレイアウトを構築することができます。

そんなウィジェットには、「コンテナー」や「カラム」などいくつかの種類があります。以下では、代表的なウィジェットについて説明します。

コンテナー

コンテナーは、ウィジェットの一種で、自身に子ウィジェットを持つことができます。子ウィジェットは、コンテナーの中に表示されます。コンテナーには、以下のような種類があります。

Padding

Paddingは、子ウィジェットの周りに余白を追加するウィジェットです。余白の大きさを指定することができます。

Container

Containerは、矩形のウィジェットです。背景色や境界線、余白、幅、高さを指定することができます。

カラム

カラムは、ウィジェットを縦方向に配置するためのウィジェットです。複数の子ウィジェットを持つことができます。カラムには、以下のような種類があります。

Column

Columnは、ウィジェットを上から下に並べるウィジェットです。

Expanded

Expandedは、Column内で使用するウィジェットで、Columnの残り領域を埋めることができます。

以上が、Flutterでよく使われるレイアウトについての説明です。

具体例

続いて、上記で挙げたウィジェットの具体例を紹介します。

Column

例えば、縦に並べたいテキストが2つある場合は、Columnウィジェットを使用して以下のように記述することができます。

Column(
  children: [
    Text('上のテキスト'),
    Text('下のテキスト'),
  ],
)

Expanded

また、ウィジェットを上下に分割したい場合には、Expandedウィジェットを使用することができます。

以下の例では、上部に青い背景色を持つコンテナー、下部に赤い背景色を持つコンテナーを配置しています。

Column(
  children: [
    Expanded(
      child: Container(
        color: Colors.blue,
        child: Center(
          child: Text('上部'),
        ),
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.red,
        child: Center(
          child: Text('下部'),
        ),
      ),
    ),
  ],
)

このように、Flutterのレイアウトは、ウィジェットを組み合わせて簡単に構築することができます。

Padding

また、ウィジェットの配置を調整するために、Paddingウィジェットを使用することができます。以下の例では、テキストを中央に配置し、周りに余白を追加しています。

Padding(
  padding: EdgeInsets.all(16.0),
  child: Center(
    child: Text('テキスト'),
  ),
)

Container

さらに、Containerウィジェットを使用することで、矩形のウィジェットを作成することができます。以下の例では、緑色の背景色を持つ、幅100ピクセル、高さ200ピクセルのコンテナーを作成しています。

Container(
  width: 100,
  height: 200,
  color: Colors.green,
)

以上が、Flutterでよく使用されるレイアウトについての例です。

これらのウィジェットを組み合わせることで、様々なレイアウトを簡単に構築することができます。