[Flutter]処理を行ってからsetStateメソッドを記述する場合とsetStateメソッド内に処理を記述する場合は何が違うのか?(動画なし:初心者向け解説)

StatefulWidgetを使う際に、状態が変化した際に画面の描画を司るbuildメソッドを呼び出すためのsetStateメソッドがありますが、

これに関して、よく見られる疑問として、

処理をしてからsetState(() {});と記述するのと、 setState(() {});の{ }の中に処理を記述するのは、 何が違うのか?

というものがあります。

つまり

void _showQuestion() {
  _currentWord = _testDataList[_index];
  setState(() {
    _isQuestionCardVisible = true;
    _isAnswerCardVisible = false;
    _isCheckBoxVisible = false;
    _isFabVisible = true;
    _txtQuestion = _currentWord.strQuestion;
  });
  _numberOfQuestion--;
  _index++;
}

の場合と

void _showQuestion() {
  _currentWord = _testDataList[_index];
  _isQuestionCardVisible = true;
  _isAnswerCardVisible = false;
  _isCheckBoxVisible = false;
  _isFabVisible = true;
  _txtQuestion = _currentWord.strQuestion;
  setState(() {});
  _numberOfQuestion--;
  _index++;
}

の場合で何が違うのかというものです。

これについては、

・setState内に書く場合は、再描画時に行いたい処理

・setStateより前で書く場合は、再描画より前で行いたい処理(=当該処理を行った後に再描画) 

という使い分けになります。

例えば、非同期処理を行った結果(Webやデータベースからの情報取得処理)を画面に反映させたい場合は、当該処理を行った後に画面の再描画(setStateの呼び出し)を行う必要があるので、後者で行うことになります。

こんな記事も読まれています

おすすめコンテンツ




Flutter(フラッター)


みんプロ作成アプリ




TOP