Waiting asynchronously for Navigator push - linter warning appears use build context synchronously

Question

In Flutter, all Navigator functions that push a new element onto the navigation stack return a Future as it's possible for the caller to wait for the execution and handle the result.

I make heavy use of it e. g. when redirecting the user (via push()) to a new page. As the user finishes the interaction with that page I sometimes want the original page to also pop():

onTap: () async {
  await Navigator.of(context).pushNamed(
    RoomAddPage.routeName,
    arguments: room,
  );

  Navigator.of(context).pop();
},

A common example is the usage of a bottom sheet with a button with a sensitive action (like deleting an entity). When a user clicks the button, another bottom sheet is opened that asks for the confirmation. When the user confirms, the confirm dialog is to be dismissed, as well as the first bottom sheet that opened the confirm bottom sheet.

So basically the onTap property of the DELETE button inside the bottom sheet looks like this:

onTap: () async {
  bool deleteConfirmed = await showModalBottomSheet<bool>(/* open the confirm dialog */);
  if (deleteConfirmed) {
    Navigator.of(context).pop();
  }
},

Everything is fine with this approach. The only problem I have is that the linter raises a warning: use_build_context_synchronously because I use the same BuildContext after the completion of an async function.

Is it safe for me to ignore / suspend this warning? But how would I wait for a push action on the navigation stack with a follow-up code where I use the same BuildContext? Is there a proper alternative? There has to be a possibility to do that, right?

PS: I can not and I do not want to check for the mounted property as I am not using StatefulWidget.

Answer 1

The "use_build_context_synchronously" lint warning is raised when you access the BuildContext object asynchronously after it has been returned from a build method. This is because accessing the BuildContext asynchronously can lead to race conditions and unpredictable behavior.

In your case, the warning is raised because you are using the same BuildContext object after an asynchronous operation (i.e., the push operation) has completed. While it may work in your specific case, it is generally not recommended to ignore this warning as it can lead to subtle bugs and unpredictable behavior.

To wait for a push action on the navigation stack with a follow-up code where you use the same BuildContext, you can use a GlobalKey to access the NavigatorState directly instead of using the context. Here's an example:

1. Declare a GlobalKey in your stateful widget:

final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();

1. Wrap your MaterialApp or Navigator widget with a Navigator key:

Navigator( key: _navigatorKey, onGenerateRoute: (settings) => generateRoute(settings), ),

1. Use the NavigatorState to push and pop pages:

onTap: () async { await Navigator.of(context).pushNamed( RoomAddPage.routeName, arguments: room, );

_navigatorKey.currentState!.pop(); },

This way, you can safely wait for the push operation to complete and then use the same BuildContext to pop the page from the navigation stack without triggering the "use_build_context_synchronously" lint warning.