SizedBox と Contaiiner の違い

はじめに

FlutterでUIを作る際にSizedBoxとContainerを混在して使用しており、両者はどのように違うのか明確に意識せずに使っていたので違いをまとめてみました。

実用上の違い

機能の違い

SizedBoxはwidth,heightを設定するのに対して、Containerはその他にもmargin, alignment, constraints, padding, transformなど他のレイアウトの制約も設定することが出来ます。

パフォーマンスの違い

SizedBoxはconstキーワードでコンパイル定数として定義 でき、実行時のインスタンス生成コストが発生しません。
一方、Containerはconstキーワードでコンパイル定数に指定出来ないため、実行時のインスタンス生成コストが発生します。

継承ツリーの違い

ContainerとSizedBoxの継承ツリーを下図で記します。

ContainerはStatelessWidgetを親に持つのに対して、SizedBoxはStatelessWidgetと親子関係にはなく、祖先としてRenderObjectWidget、SingleChildRenderObjectWidget を持ちます。

SizedBoxの兄弟として、CustomPaintクラスを持つことからも分かる通り、SizedBoxはレンダリング系のWidgetとして扱われていることがわかります。

SizedBoxとContainerの使い分け

width,heightでのみレイアウトを制約したい場合はconstキーワードでSizedBoxを宣言し、それ以外でレイアウトに対して制約を加えたい場合はContainerで宣言する方が良いです。

参考文献

• SizedBox class ドキュメント/実装

  • https://api.flutter.dev/flutter/widgets/SizedBox-class.html
  • https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/container.dart#L244

• Container class ドキュメント/実装

  • https://api.flutter.dev/flutter/widgets/Container-class.html

• RenderObject Widget 実装

  • https://api.flutter.dev/flutter/widgets/RenderObjectWidget-class.html

• Stackoverflow

  • https://stackoverflow.com/questions/55716322/flutter-sizedbox-vs-container-why-use-one-instead-of-the-other