レイアウトWidget（Row、Column、Center、Container）

Row Widget

Rowは、水平方向にWidgetを配置するために使用される。
子Widgetを横に並べて表示し、自動的にWidgetの幅を調整する。
例えば、以下のようなコードで、Row内に3つのContainerを横並びに配置することができる。

Row(
  children: [
    Container(
      width: 50,
      height: 50,
      color: Colors.red,
    ),
    Container(
      width: 50,
      height: 50,
      color: Colors.green,
    ),
    Container(
      width: 50,
      height: 50,
      color: Colors.blue,
    ),
  ],
)

Column Widget

Columnは、垂直方向にWidgetを配置するために使用される。
子Widgetを縦に並べて表示し、自動的にWidgetの高さを調整する。
例えば、以下のようなコードで、Column内に3つのContainerを縦に配置することができる。

Column(
  children: [
    Container(
      width: 50,
      height: 50,
      color: Colors.red,
    ),
    Container(
      width: 50,
      height: 50,
      color: Colors.green,
    ),
    Container(
      width: 50,
      height: 50,
      color: Colors.blue,
    ),
  ],
)

Center Widget

Centerは、子Widgetを親Widgetの中心に配置するために使用される。
Centerは、縦横両方向で子Widgetを中央に配置する。

Center(
  child: Text('Hello, World!'),
)

Container Widget

Containerは、Widgetの外観を指定するために使用される基本的なものの1つである。
Containerは、背景色、境界線、パディング、マージン、幅、高さなどのプロパティを設定できる。
例えば、以下のようなコードで、Containerの背景色を赤、幅を200ピクセル、高さを100ピクセルに設定することができる。

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

Container が設定できる主要プロパティ

プロパティ名主な機能
color色を決めることができる。
Colorsと記述すると、あらかじめ用意されているカラーセットが表示される
width & height横幅と縦幅を決めることができる。
childContainer内の子要素としてWidgetを1つ挿入することができる。
alignmentContainer内の子要素の位置を決めることができる。
Alignmentと記述すると、配置パターンの一覧が表示される
padding & marginパディングとマージンを決めることができる。
void main() {
  // 画像
  final img = Image.asset(
    'images/sushi.jpeg',
  );

  // 小さいコンテナ
  final smallCon = Container(
    color: Colors.deepOrange, // オレンジ色
    width: 50,
    height: 50,
  );

  // 縦に並べるカラム
  final col = Column(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      smallCon, // 小さいコンテナ
      img, // 画像
      smallCon, // 小さいコンテナ
    ],
  );

  // 大きいコンテナ
  final bigCon = Container(
    color: Colors.blue, // 青色
    width: 400,
    height: 400,
    alignment: Alignment.centerLeft,
    padding: const EdgeInsets.all(20), // 全方向に20pxのpadding
    padding: EngeInsets.fromLTRB(10, 20, 30, 40), // 左、上、右、下の順に値を設定する
    padding: EdgeInsets.only(left:8, top:16) // 左に8, 上に16のpadding
    child: col, // 中にカラムを丸ごと入れる
  );

  // アプリ
  final a = MaterialApp(
    home: Scaffold(
      body: Center(
        child: bigCon, // 大きいコンテナを表示する
      ),
    ),
  );
  runApp(a);
}

MainAxisAligment

RowとColumnの子要素の並びの配置を変更することができる（全6種類）。

種別内容
center中央寄せになる
startRowなら左寄せ、Columnなら上寄せになる
endRowなら右寄せ、Columnなら下寄せになる
spaceAround先頭の子要素の前、末尾の子要素の後にスペースを空ける、また子要素の間に均等なスペースを空ける。
これらの2つのスペースのサイズは異なる。
（※子供たちが両手を広げて並んで、互いにぶつからない程度の幅 というイメージ）
spaceBetween子要素の間に均等なスペースを空ける
spaceEvenly先頭の子要素の前、末尾の子要素の後、または子要素の間に均等なスペース空ける。
spaceAroundと違い全てのスペースが均等になる。
const col = Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('レモン'),
    Text('りんご'),
    Text('ブドウ'),
  ],
);

CrossAxisAlignment

RowとColumnの子要素の並びの配置を変更することができる（全5種類）。

種別内容
baselineテキストのベースラインを揃えるように配置される
center中央寄せになる
startColumnなら左寄せ（厳密にはTextDirectionによって開始位置が決まる）
Rowなら上寄せになる(厳密にはVerticalDirectionによって開始位置が決まる)
endColumnなら右寄せ（厳密にはTextDirectionによって開始位置が決まる）
Rowなら上寄せになる(厳密にはVerticalDirectionによって開始位置が決まる)
stretch子要素の幅また高さを埋めるように配置する
const col = Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text('レモン'),
    Text('りんご'),
    Text('ブドウ'),
  ],
);

mainAxisSize

MainAxisSize.max

MainAxisSize.maxは、Column のchildrenで埋まった領域に対する残りの領域を、縦方向に最大化するプロパティ。
例えば、最大400の高さのContainerのうち、Column のchildrenが300専有していたとしたら、残りの領域の100をフルに使ってスペースを取ろうとする。
MainAxisSize.maxはデフォルト値となっている。

MainAxisSize.min

MainAxisSize.minは、Column のchildrenで埋まった領域に対する残りの領域を、縦方向に最小化するプロパティ。
例えば、最大400の高さのContainerのうち、Column のchildrenが300専有していたとしたら、残りの領域の100を最小化するため余りのスペースはなくなる（children分の高さに合わさる）。

inserted by FC2 system