【日本語版】【Flutter】Widget of the Week – #46 IndexedStack【要約】

動画

要約

  • 複数のwidgetの表示を切り替える場合、IndexedStackを使うとシンプルに実装できる
  • 表示するwidgetをchildrenに渡し、indexで表示するwidgetを指定する
  • 表示するwidgetを切り替える場合は、setState等でindexの値を変えるだけでいい

内容

ユーザーがwidgetの表示を切り替えられるようにする場合、IndexedStackが使えるかもしれません。

IndexedStackは、例えるならテレビのチャンネルを切り替えるようなイメージで動きます。

表示されるwidgetはひとつだけですが、全てのwidgetのStateを保持し続けます。

使い方は簡単です。

まず、表示する全てのwidgetをIndexedStackでラップします。
 

あとは、現在表示したいwidgetをindexで指定するだけです。
 
setState等でindexの値を変えるだけで、表示するwidgetを切り替えることができます。
 

まとめ

Widget of the Weekの#46 IndexedStackの日本語翻訳版でした。

IndexedStackはお手軽にwidgetの切り替えが実現できるwidgetです。

コードもシンプルに保つことができます。

■ 次の記事はこちら
作成中

■Widget of the Week まとめ
Widget of the Week 一覧