📱

SizedBox と Contaiiner の違い

2021/09/27に公開約1,400字2件のコメント

はじめに

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

参考になりました!ありがとうございます!

2点気になったところがあるのですが

SizedBoxはconstキーワードでコンパイル定数として定義 でき、実行時のインスタンス生成コストが発生します。

こちらは「SizedBoxはconstキーワードでコンパイル定数として定義できるので、実行時のインスタンス生成コストが発生しません」ではないでしょうか?

また、継承ツリーの説明にある

ContainerやStatelessWidgetを親に持つのに対して

こちらは「ContainerStatelessWidgetを親に持つのに対して」ではないでしょうか?

よろしくお願いします!

指摘いただきとてもありがたいです!

指摘の通り、文章が間違っていたので訂正させていただきました。

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