0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

FlutterのOffstageとは何をするウィジェットかを理解する

Posted at

FlutterでUIを構築していると、「画面には表示したくないが、ウィジェット自体はツリー上に残しておきたい」という場面に出会います。そのような要件に応えるのが Offstage というウィジェットです。名前のとおり「舞台の裏」に下げるイメージで、表示と非表示を柔軟に切り替えられる仕組みを提供しています。

Offstageの最大の特徴は、描画されないが、ウィジェットとしては存在し続ける点にあります。offstage: true を指定すると、その子ウィジェットはレイアウトや描画の対象から外れ、画面には一切表示されません。しかし、Stateは破棄されず、AnimationやFocus、TextEditingControllerなども保持されたままです。つまり「見えないだけ」であり、「消えている」わけではありません。

ここでよく比較されるのが Visibility や条件分岐によるウィジェットの切り替えです。たとえば、if 文でウィジェットを生成しない場合、そのウィジェットはツリーから完全に除外され、Stateも破棄されます。一方でOffstageは、UIツリー上に残り続けるため、再表示したときに状態をそのまま復元できるという利点があります。フォーム入力途中の画面や、タブ切り替え時の内部状態保持などで重宝される理由がここにあります。

ただし、Offstageは万能ではありません。描画こそされませんが、ウィジェットツリーには存在するため、場合によっては不要な計算やリソースを抱え続けることになります。大量のウィジェットをOffstageで抱え込むと、パフォーマンスに影響する可能性もあります。そのため、「状態を保持したまま一時的に非表示にしたい」という明確な目的がある場合に使うのが適切です。

実践的な使いどころとしては、タブUIの裏側にある画面、ステップ形式の入力画面、アニメーションの事前準備などが挙げられます。特に、表示切り替えのたびに初期化が走ってほしくないUIでは、Offstageは非常に相性が良いウィジェットです。

まとめると、Offstageは「表示しないが、存在させ続ける」ためのFlutter特有の仕組みであり、状態管理とUI制御を両立したい場面で力を発揮します。表示・非表示の選択肢を理解したうえで使い分けることで、より洗練されたFlutterアプリ設計が可能になります。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?