FlutterでWidget間の隙間を空けるのにSizedBoxを使う違和感

結論

隙間を空ける用途でSizedBoxを使うのは問題ない

背景

普段Web開発を普段している私は、Flutterで隙間を空けるためにSizedBoxが用いられていることに違和感があった。
例えばcontent1とcontent2の間にスペースを空けたいときはHTMLではこのような記載になる。(説明の簡易化のためにTailwindCSSを利用)

<div class="mb-2"> Hello, World! </div>
<div> Welcome to Flutter </div>

それをDartで再現しようとすると、以下のようになる。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Hello, World!'),
              SizedBox(height: 8), // ☆ここ
              Text('Welcome to Flutter'),
            ],
          ),
        ),
      ),
    );
  }
}

このSizedBoxはあたかも<div class="my-1">という空divを置いているようで、とても違和感があった。

<div> Hello, World! </div>
<div class="my-1">
<div> Welcome to Flutter </div>

しかし複数の学習ではこのようなSizedBoxの使い方が紹介されていたため、公式ソースを追ってみることにした。

公式の説明

以下の動画に｢Great for adding gaps between widgets｣と説明あり。
ウィジェット間のスペース空ける用途で用いられていた。

最後に

隙間を空ける用途でSizedBoxを使うのは問題ない。今後はSpacerやContainer、Paddingなど用途に併せてSizeBoxもうまく活用していきたい。