レイアウト：Row、Column、Padding、Expanded、SizedBox

列、行、余白、空間の配分を使って、画面上の複数のウィジェットを整理しましょう。

9 分 · 3 問

本物の画面が単一のウィジェットだけを表示することはめったにありません。ウィジェットを整理する必要があります。それがレイアウトウィジェットの仕事です。Columnは子を上から下へ縦に積み重ね、Rowは子を左から右へ横に並べます。これらは複数の子を受け入れるので、パラメーターはもうchildではなくchildrenと呼ばれ、リストを受け取ります。角括弧[ ]の中に、カンマで区切って並べたウィジェットです。

import 'package:flutter/material.dart';

Widget buildProfile() {
  return const Column(
    children: [
      Icon(Icons.person, size: 48),
      Text("Sonia Ben Ali"),
      Text("Flutter Developer"),
    ],
  );
}

Rowもまったく同じように働きますが、横向きです。その主軸は幅です。mainAxisAlignmentパラメーターは、その軸に沿って子をどう配分するかを選びます（centerは中央にまとめ、spaceBetweenはできるだけ離して広げます……）。そして、二つのウィジェットの間に単純な空きスペースをはさむには、SizedBoxを使います。これは、幅（width）や高さ（height）をあなたが設定する、目に見えない箱です。

import 'package:flutter/material.dart';

Widget buildRating() {
  return const Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.star, color: Colors.amber),
      SizedBox(width: 8),
      Text("4.8 out of 5"),
    ],
  );
}

Paddingは子の周りにスペースを加え、中身が端にくっつかないようにします。スペースの量はEdgeInsetsで表します。EdgeInsets.all(16)は四方すべてに16ピクセルを、EdgeInsets.only(left: 8)は左だけに、EdgeInsets.symmetric(horizontal: 12)は左右に同時に置きます。

import 'package:flutter/material.dart';

Widget buildQuote() {
  return const Padding(
    padding: EdgeInsets.all(16),
    child: Text("A text with some room around it"),
  );
}

最後の道具はExpandedです。RowやColumnの子の中に置くと、その子に残りのスペースをすべて取るように求めます。次の例では、グレーの箱は幅80ピクセルを保ち、ティール色の箱は画面の大きさにかかわらず、残りの幅を埋めるように伸びます。

import 'package:flutter/material.dart';

Widget buildProgress() {
  return Row(
    children: [
      Container(width: 80, height: 40, color: Colors.grey),
      Expanded(
        child: Container(height: 40, color: Colors.teal),
      ),
    ],
  );
}

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. Columnはどの方向に子を並べますか？
   • 横向きに、左から右へ
   • 縦向きに、上から下へ
   • 円を描いて、画面の中央のまわりに
2. Expandedウィジェットは何のためのものですか？
   • RowやColumnの中で、その子に残りのスペースをすべて取らせるため
   • 画面上のすべてのテキストのフォントを大きくするため
   • 画像に触れたときにズームするため
3. Rowの中で二つのウィジェットの間に8ピクセルの空きスペースを挿入するにはどうしますか？
   • 二つの間にSizedBox(width: 8)を置く
   • スペースバーを8回押す
   • Expanded(width: 8)を使う