Do not use BuildContexts across async gaps

Question

I have noticed a new lint issue in my project.

Long story short:

I need to use BuildContext in my custom classes

flutter lint tool is not happy when this being used with aysnc method.

Example:

   MyCustomClass{

      final buildContext context;
      const MyCustomClass({required this.context});

      myAsyncMethod() async {
        await someFuture();
        # if (!mounted) return;          << has no effect even if i pass state to constructor
        Navigator.of(context).pop(); #   << example
      }
   }

Answer 1

Update Flutter 3.7+ :

mounted property is now officially added to BuildContext, so you can check it from everywhere, whether it comes from a StatefulWidget State, or from a Stateless widget.

While storing context into external classes stays a bad practice, you can now check it safely after an async call like this :

class MyCustomClass {
  const MyCustomClass();

  Future<void> myAsyncMethod(BuildContext context) async {
    Navigator.of(context).push(/*waiting dialog */);
    await Future.delayed(const Duration(seconds: 2));
    if (context.mounted) Navigator.of(context).pop();
  }
}

// Into widget
  @override
  Widget build(BuildContext context) {
    return IconButton(
      onPressed: () => const MyCustomClass().myAsyncMethod(context),
      icon: const Icon(Icons.bug_report),
    );
  }
// Into widget

---

Original answer

Don't stock context directly into custom classes, and don't use context after async if you're not sure your widget is mounted.

Do something like this:

class MyCustomClass {
  const MyCustomClass();

  Future<void> myAsyncMethod(BuildContext context, VoidCallback onSuccess) async {
    await Future.delayed(const Duration(seconds: 2));
    onSuccess.call();
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      onPressed: () => const MyCustomClass().myAsyncMethod(context, () {
        if (!mounted) return;
        Navigator.of(context).pop();
      }),
      icon: const Icon(Icons.bug_report),
    );
  }
}

Answer 2

Use context.mounted*

In StatefulWidget/StatelessWidget or in any class that has BuildContext:

void foo(BuildContext context) async {
  await someFuture();
  if (!context.mounted) return;
  Navigator.pop(context); // No warnings now
}

_{* If you're in a StatefulWidget, you can also use just mounted instead of context.mounted}

Answer 3

If your class can extend from StatefulWidget then adding

if (!mounted) return;

would work!

EDIT

I had this issue again and again and here's the trick - use or declare variables using context before using async methods like so:

    MyCustomClass{
      const MyCustomClass({ required this.context });

      final buildContext context;
      
      myAsyncMethod() async {
        // Declare navigator instance (or other context using methods/classes)
        // before async method is called to use it later in code
        final navigator = Navigator.of(context);
       
        await someFuture();
        
        // Now use the navigator without the warning
        navigator.pop();
      }
    }

EDIT END

As per Guildem's answer, he still uses

if (!mounted) return;

so what's the point of adding more spaghetti code with callbacks? What if this async method will have to pass some data to the methods you're also passing context? Then my friend, you will have even more spaghetti on the table and another extra issue.

The core concept is to not use context after async bloc is triggered ;)

Answer 4

you can use this approach

myAsyncMethod() async {
  await someFuture().then((_){
     if (!mounted) return;          
        Navigator.pop(context); 
     }
});

Now in you can access mounted from context anywhere in the widget and in any class that is using BuildContext like this

if(context.mounted) {
// do your navigation 
} else {
   return;
}

UPDATE: 2025

In latest version of flutter it is recommended to use mounted directly inside StatefulWidget

instead of using

if (context.mounted) {
  pop(context);
}

Use

if (mounted) {
  pop(context);
}

you can check the details when to use context.mounted and mounted here: use_build_context_synchronously

Answer 5

If you want to use mounted check in a stateless widget its possible by making an extension on BuildContext

extension ContextExtensions on BuildContext {
  bool get mounted {
    try {
      widget;
      return true;
    } catch (e) {
      return false;
    }
  }
}

and then you can use it like this

if (context.mounted)

Inspiration taken from GitHub PR for this feature and it passes the same tests in the merged PR

Answer 6

This help for me.

/// transition to the main page after a pause of 3 seconds
Future<void> _navigateToMainScreen(BuildContext context) async {
  await Future.delayed(const Duration(seconds: 3));
  if (context.mounted) {
    Navigator.of(context)
        .push(MaterialPageRoute(builder: (context) => const MainScreen()));
  }
}

Answer 7

In Flutter 3.7.0 BuildContext has the property mounted. It can be used both in StatelessWidget and StatefulWidgets like this:

void bar(BuildContext context) async {
  await yourFuture();
  if (!context.mounted) return;
  Navigator.pop(context);
}

Answer 8

The mounted property is now accessible from BuildContext, allowing you to verify its validity from any widget, whether it's a StatefulWidget or a StatelessWidget.

While it's generally advised against storing BuildContext in external classes, you can now confidently ensure its integrity after an asynchronous call:

class MyCustomClass {
  const MyCustomClass();

  Future<void> myAsyncMethod(BuildContext context) async {
    Navigator.of(context).push(/* waiting dialog */);
    await Future.delayed(const Duration(seconds: 2));
    if (context.mounted) {
      Navigator.of(context).pop();
    }
  }
}

// Within a widget
@override
Widget build(BuildContext context) {
  return IconButton(
    onPressed: () => const MyCustomClass().myAsyncMethod(context),
    icon: const Icon(Icons.bug_report),
  );
}

This approach guarantees safe usage of BuildContext in asynchronous operations, confirming its continued presence within the widget tree.

Answer 9

Easiest way I could found is

Future.delayed(Duration.zero, () {

    // your code which uses Buildcontext in async function

});

Answer 10

Bad:

if(!context.mounted) return;

Good:

if(!mounted) return;

if you check context.mounted and your context is already popped(if i press the back button) then you will get an exception and your app will be crashed.

always use mounted if you want to check your current context is not popped.

safe and secure.

Answer 11

To avoid this in StatelessWidget you can refer to this example

class ButtonWidget extends StatelessWidget {
  final String title;
  final Future<String>? onPressed;

  final bool mounted;

  const ButtonWidget({
    super.key,
    required this.title,
    required this.mounted,
    this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        const SizedBox(height: 20),
        Expanded(
            child: ElevatedButton(
          onPressed: () async {
            final errorMessage = await onPressed;
            if (errorMessage != null) {
              // This to fix: 'Do not use BuildContexts across async gaps'
              if (!mounted) return;
              snackBar(context, errorMessage);
            }
          },
          child: Text(title),
        ))
      ],
    );
  }
}

Answer 12

For anyone who is having this problem nowadays, a simple solution is to use a conditional with context.mount Example:

 InkWell(
   onTap: () async {
             
     if (await controller.getOrderDetails(context,
          controller.orders.value[index].id!, index) 
          && >>> context.mounted <<<
            ) {
            await showModalBottomSheet(
             shape: const RoundedRectangleBorder(
             borderRadius: BorderRadius.only(
               topLeft: Radius.circular(6.0), topRight:Radius.circular(6.0))),
             context: context,
             builder: (context) => DraggableScrollableSheet(
               expand: false,
               minChildSize: .4,
               initialChildSize: .4,
               maxChildSize: .85,
               builder: (context, scrollController) => Column(
                 mainAxisAlignment: MainAxisAlignment.start,
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [const DraggableIndicator(), widget],
              ),
            ),
          }
        }...
    ...

You will see that the warning in context will disappear

Answer 13

void onButtonTapped() async {
//Capture the context before the async operation
final navigator = Navigator.of(context);
await Future.delayed(const Duration(seconds: 1));

// Use the captured navigator context after the async operation
navigator.push(MaterialPageRoute(builder: (context) => const             ScreenChooseAmount()) );
}

Answer 14

i think your problem happens when you try to navigate using Navigatorlike you showed : Navigator.of(context).pop(); "context" here is not recommended as it's taken from where the async happened before!

the solution in your case is to use GetIt and GoRoute together to initialise an instance of a router for the whole app like so :

instanceGetIt.registerLazySingleton<RoutesManager>(
  () => RoutesManager(isOnBoarding: true, isLoggedIn: isLoggedIn));

and then start to consume it within the other screens without contexts like so :

 instanceGetIt<RoutesManager>()
                                .router
                                .push('/your_desired_route');

Answer 15

using buildcontext across async method or class is now not work in current version of flutter rather than introduce context in async await use method callback for navigation and other purposes

Answer 16

Just simplify create a function to call the navigation

void onButtonTapped(BuildContext context) {
  Navigator.of(context).pop();
}

Answer 17

just save your navigator or whatever needs a context to a variable at the beginning of the function

      myAsyncMethod() async {
        final navigator = Navigator.of(context); // 1
        await someFuture();
        navigator.pop();  // 2
      }

Answer 18

Add use_build_context_synchronously rule in your analysis_options.yaml file:

linter:
  rules:
    use_build_context_synchronously: false

This rule will remove all "Do not use BuildContexts across async gaps" warning in your code.

Answer 19

DO NOT use BuildContext across asynchronous gaps.

Storing BuildContext for later usage can easily lead to difficult to diagnose crashes. Asynchronous gaps are implicitly storing BuildContext and are some of the easiest to overlook when writing code.

When a BuildContext is used from a StatefulWidget, the mounted property must be checked after an asynchronous gap.

So, I think, you can use like this:

GOOD:

class _MyWidgetState extends State<MyWidget> {
  ...

  void onButtonTapped() async {
    await Future.delayed(const Duration(seconds: 1));

    if (!mounted) return;
    Navigator.of(context).pop();
  }
}

BAD:

void onButtonTapped(BuildContext context) async {
  await Future.delayed(const Duration(seconds: 1));
  Navigator.of(context).pop();
}