【コラム】Spacerを使える時に使っとけ！

要素を縦に並べる。要素を横に並べる。

そんな時によく使われるのがmainAxisAlignmentやcrossAxisAlignmentですよね。
ただ、デザインの都合上、不規則な間隔を再現するのに煩わしさを覚えた経験はありませんか？？

使用条件は限定されますが、使える時はSpacerを使って楽していきましょう！

Spacerで実装する

 Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          // ↓↓↓↓ここからが重要↓↓↓↓
          child: Row(
            children: [
              CircleAvatar(radius: 20),
              SizedBox(width: 16), // ここの幅は固定
              Text(
                "OLIVE COFFEE",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
              ),
              Spacer(), // Spacerで残りのスペースを埋めてくれる！！
              Text(
                "6/22",
                style: TextStyle(fontWeight: FontWeight.w400, fontSize: 16),
              ),
            ],
          ),
        ),
      ),
    );
  }

使用上の注意

親Widgetの領域が無限領域の時はエラーが発生する

ListViewやShingleChildScrollViewでラップされた領域にそのままSpacerを使用するとエラーが発生するので注意！
親Widgetのサイズに制限をかけることがマストになります。

Spacerを使う利点

• レスポンシブに対応可能
• flexを活用することで柔軟で不規則な間隔も再現可能
• Expandedよりもシンプルなコードで、意図がわかりやすい
• 余白が0pxになればSpacerの領域が消滅する

そう。楽してこうぜ。