技術記事

micomia株式会社の井上です。今回はPage Stateについて解説していきます。

初心者にもわかりやすく解説していくのでぜひご一読ください。

1. Page Stateとは

App StateとPage Stateがあり混乱しがちだと思うので比較しながら解説していきます。

Page Stateは簡単に言うとページ単位で変数を用意できるものになっています。

App Stateはさまざまなページに変数を渡すことができますが、Page Stateでは一つの画面でしか用意できないのでそれぞれの画面ごとに変数を用意する必要があります。

2. Page Stateの実装方法

Page StateはScaffoldを選択すると右側のパネルに設定箇所が表示されます。ここにも「Local Page State Variables」と記載があるようにこの画面の中でしか使用できない変数を用意するものがPage Stateです。

Add Fieldを押して、今回は試しにTypeはStringでaddress(住所)という変数を入れます。Confirmを押して適用します。

次にそのPage Stateを使いたいWidgetを追加します。今回は例としてTextを使用します。

追加できたら、Textの変数に先ほど設定したPage Stateのaddressを設定します。

今回は少し不適切ではあるのですが、このTextをタップすることでPage Stateが更新されるようにUpdate Page Stateを実装します。

実装できたら、Add Fieldを押して先ほどのPage Stateをセットします。

今回はTextをタップすることでPage Stateが更新されて群馬県と表示されるようにしたいのでValueには群馬県と入れます。これでPage Stateの実装は完了です。

Page Stateが一つの画面でしか使用できないことを確かめるために違う画面を見てみます。

先ほど設定した画面とは異なる画面でTextの変数設定箇所を見てみるとPage Stateが表示されていません。これがPage Stateの特性とも言えます。

3. さいごに

今回はPage Stateについて解説していきました。Page Stateはその画面に一時的にデータを持たせておきたい場合に使用するもので、App Stateとは似ているようで異なるものなので2つの違いに注意しながら実装していきましょう。

本記事の内容を動画で見たい方は以下をご覧ください。