😎

【Flutter】use_build_context_synchronouslyについて

2023/07/06に公開

use_build_context_synchronouslyとは

下記の画像の通り、onTapの中では非同期の処理(2秒待つ処理)の後にNavigator.pop(context)が実行されています。
Navigator.pop(context)には青色の下線が引かれています。
これがuse_build_context_synchronouslyであり、非同期処理の後にcontextを使用した処理を書かないでくださいと言っています。

解決方法

では、青色の下線を消すためには、何をするべきか記載していきます。
まず、下記のBeforeとAfterのコードを見比べてください。
Afterでは、非同期処理の後にcontextを使用する前に、if (context.mounted) という判定を行なっています。
こうすることで、青色の下線を消すことができます。

Before

onTap: () async {
	await Future.delayed(const Duration(seconds: 2));
	Navigator.pop(context);
},

After

onTap: () async {
	await Future.delayed(const Duration(seconds: 2));
	if (context.mounted) Navigator.pop(context);
},

context.mountedとは

context.mountedは、BuildContextのプロパティです。
BuildContextは、ウィジェットツリー内の特定のウィジェットに関連づけられたビルドコンテキストを表します。

context.mountedは、ウィジェットが現在マウント(ウィジェットツリーに配置)されているかどうかを示すブール値を返します。
マウントされたウィジェットは、ウィジェットツリーにおいてビルドや更新の対象となることを意味します。

Discussion