【Flutter】SpacerでWidget間の空白を超簡単に最適化する

アプリのUIを見やすくするには「適切な余白」を上手く活用する事が重要ですよね。

ただ闇雲に沢山の文字や情報が画面に表示されているだけよりも、適切な空白があるだけでスッと情報が頭に入りやすくなりますし、UXも格段に良くなります。

今回はそんな時に役に立つSpacerについて解説していきます。

この記事を読み終わる頃にはSpacerの便利さと有効な使い方を理解できていると思いますので是非最後まで読んでみてください。

バージョン

・Flutter 3.0.1

・Dart 2.13.3

解説

サンプルコード

とりあえず最初に全体のサンプルコードを載せておきます。

コピペすればすぐ画面に表示できるのでとりあえず動かしてみてください。

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Spacer',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Spacer'),
        ),
        body: Column(
          children: [
            Expanded(
              child: Center(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(color: Colors.red, height: 20, width: 20),
                    Spacer(), // 空白を入れたいWidgetの間に挟む
                    Container(color: Colors.blue, height: 20, width: 20),
                    Spacer(),
                    Container(color: Colors.green, height: 20, width: 20),
                  ],
                ),
              ),
            ),
            Expanded(
              child: Center(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(color: Colors.yellow, height: 20, width: 20),
                    Spacer(flex: 1), // flex:空白の比率を指定するプロパティ
                    Container(color: Colors.pink, height: 20, width: 20),
                    Spacer(flex: 2),
                    Container(color: Colors.grey, height: 20, width: 20),
                    Spacer(flex: 3),
                    Container(color: Colors.orange, height: 20, width: 20),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

使い方

基本的な使い方は超簡単です。

ColumnやRow等で複数Widgetを並べる時に、空白を作りたいWidgetとWidgetの間にSpacerを挟むだけです。

オプションを何も指定しなければ、Widget間の空白を自動的に均等にしてくれます。

main.dart

child: Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(color: Colors.red, height: 20, width: 20),
    Spacer(), // 空白を入れたいWidgetの間に挟む
    Container(color: Colors.blue, height: 20, width: 20),
    Spacer(),
    Container(color: Colors.green, height: 20, width: 20),
  ],
),

この部分の場合、ContainerとContainerの間にSpacerを挟む事でその間の空白を均等（1:1）にしています。

flexオプション

main.dart

child: Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(color: Colors.yellow, height: 20, width: 20),
    Spacer(flex: 1), // flex:空白の比率を指定するプロパティ
    Container(color: Colors.pink, height: 20, width: 20),
    Spacer(flex: 2),
    Container(color: Colors.grey, height: 20, width: 20),
    Spacer(flex: 3),
    Container(color: Colors.orange, height: 20, width: 20),
  ],
),

Spacerはflexプロパティで空白の比率を指定できます。

この部分の場合、空白の比率を1:2:3で指定しています。