In my Flutter App, there are 2 screens called "home screen" and "data screen". In data screen I am making a GET Http request to a server and after if request is successful, I need to change some state using riverpod providers.
Data screen http request and provider code:
await Future.delayed(const Duration(seconds: 3));
var jsonBody = await HttpService.httpService.getRequest(
path: Uri.parse("$address/getData"),
requestHeaders: {}
);
if((jsonBody["status"] as String).compareTo("OK") == 0 && mounted){
ref.read(dataProvider.notifier).setData(jsonBody["data"]);
}
Here, if user closes the data screen (pops it off from nav stack) while http request is loading, the context of data screen widget is destroyed, so flutter gives me an error and says "looking up for a deactivated widget’s ancestor is unsafe"
E/flutter (11326): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Looking up a deactivated widget's ancestor is unsafe.
E/flutter (11326): At this point the state of the widget's element tree is no longer stable.
E/flutter (11326): To safely refer to a widget's ancestor in its dispose() method, save a reference to the ancestor by calling dependOnInheritedWidgetOfExactType() in the widget's didChangeDependencies() method.
E/flutter (11326): #0 Element._debugCheckStateIsActiveForAncestorLookup.<anonymous closure> (package:flutter/src/widgets/framework.dart:4347:9)
E/flutter (11326): #1 Element._debugCheckStateIsActiveForAncestorLookup (package:flutter/src/widgets/framework.dart:4361:6)
E/flutter (11326): #2 Element.getElementForInheritedWidgetOfExactType (package:flutter/src/widgets/framework.dart:4396:12)
E/flutter (11326): #3 ProviderScope.containerOf (package:flutter_riverpod/src/framework.dart:102:12)
E/flutter (11326): #4 ConsumerStatefulElement.read (package:flutter_riverpod/src/consumer.dart:613:26)
E/flutter (11326): #5 _DataScreenState.build.<anonymous closure> (package:flt_playground/screens/screen_data.dart:481:41)
E/flutter (11326): <asynchronous suspension>
To prevent this I also check if widget is mounted in the if statement. But the service takes my http request and I definitely need to update the state by calling that ref.read method.
How I can best handle this scenario? Should I prevent user closing the page while request is loading? What is the best practice for this use case?
Thank you for your answers and time..
2
Answers
I am no Flutter expert, but I believe that your code should work. You check if the widget is still mounted with
mounted
boolean but somehow you still get an error. The best way to approach this issue (in my opinion) is to check other parts of your code, it might not be caused by that line.Or simply, you can prevent the user from any interactions while the request is still happening. That would be my first go-to.
Maybe showing a loading indicator, even though they’re annoying.
If you don’t want to implement any of these, we can turn our attention to the error message:
The error message suggest that you should save a reference to the ancestor widget in the
didChangeDependencies()
method if you need to safely refer to it within thedispose()
method of your widget. We can use the dispose() method to handle the request cancelation, or anything else you want in that matter.I can’t see your whole code, so I will just give a simple example to show you how I would implement those methods. I will use
DataProvider
.Replace the DataProvider with your actual widget.
I hope that helps your issue. Also here is a really cool link that might be a good starting point if nothing works for you.
As the error states, the problem is calling
ref.read
after an asynchronous computation. Since the user canpop
the page,ref.read
will cause the error.If all you’re trying to do is make sure the provider’s method is executed, then consider storing a reference before any asynchronous work takes place.
After 3 seconds, the
setData
method of your provider will be called.