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

0 votes

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.

Apr 13 in Flutter by Ashwini
• 5,390 points
947 views

1 answer to this question.

0 votes

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.

answered Apr 13 by Tej

Related Questions In Flutter

0 votes
1 answer
+1 vote
1 answer

flutter_background_service for iOS

The flutter_background_service package provides a convenient way ...READ MORE

answered Apr 4 in Flutter by Ashwini
• 5,390 points
2,833 views
0 votes
1 answer
0 votes
1 answer

How to disable bouncing animation for pageview in flutter

To disable bouncing animation for PageView in ...READ MORE

answered Apr 10 in Flutter by Anitha
1,944 views
0 votes
1 answer

Flutter, run async function on stream.listen

You can make the listen callback an ...READ MORE

answered Mar 20 in Android by pooja
540 views
0 votes
1 answer

Dart_LoadScriptFromKernel: The binary program does not contain 'main'.

Hi@akhtar, You need to add the main() function ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
2,963 views
0 votes
1 answer

How to install Dart in Windows system?

Hi@akhtar, Dart is the programming language used to code Flutter apps. ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
658 views
0 votes
1 answer

flutter run: No connected devices

Hi@akhtar, To prepare to run and test your ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
3,614 views
0 votes
1 answer

Run IOS Background Services for longer time

To run an iOS app's background services ...READ MORE

answered Mar 31 in Flutter by Raji
1,372 views
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP