[Flutter]Rowの余白を設定するには？

どうも、ちょげ(@chogetarou)です。

Rowの要素同士の余白を作る方法を紹介します。

方法

Rowの要素同士の余白を作る方法は、２つあります。

SizedBox

１つは、SizedBoxを使う方法です。

まず、要素同士にSizedBoxを配置します。

そして、SizedBoxの引数「width」に余白の大きさを指定します。

Row(
  children: [
    Widget1(),
    SizedBox(width: 余白の大きさ),
    Widget2()
  ],
),

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
            SizedBox(width: 20.0),
            Container(
              color: Colors.green,
              height: 100,
              width: 100,
            ),
            SizedBox(width: 35.0),
            Container(
              color: Colors.red,
              height: 100,
              width: 100,
            ),
          ],
        ),
      ),
    );
  }

Spacer

もう１つは、Spacerを使う方法です。

具体的には、要素同士の間にSpacer()を配置します。

Row(
  children: [
    Widget1(),
    Spacer()
    Widget2()
  ],
),

Spacerは、使用できる最大限の余白を、余白の大きさにします。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Spacer(),
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
            Spacer(),
            Container(
              color: Colors.green,
              height: 100,
              width: 100,
            ),
            Spacer(),
            Container(
              color: Colors.red,
              height: 100,
              width: 100,
            ),
          ],
        ),
      ),
    );
  }

まとめ

Rowで余白を作るには、SizedBoxもしくはSpacerを使います。