📱

SizedBox と Contaiiner の違い

1 min read

はじめに

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

実用上の違い

機能の違い

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

パフォーマンスの違い

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

継承ツリーの違い

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

Container と SizedBoxの継承関係

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

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

SizedBoxとContainerの使い分け

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

参考文献

Discussion

ログインするとコメントできます