'error with PhotoView : Looking up a deactivated widget's ancestor is unsafe
I have read few stackoverflow posts about "Looking up a deactivated widget's ancestor is unsafe" error but couldn't find an answer which work.
I've tried to set a global key with the scaffold, and to use WidgetsBinding.instance.addPostFrameCallback() without success.
I'm pretty sure I'm doing something stupid and easy to fix, but I can't figure out what.
This is a simple version of the code which replicates the error when you go back from PhotoViewPage (photo_view package) :
my_home_page.dart
import 'package:flutter/material.dart';
import 'package:phototest/photo_view_page.dart';
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return TextButton(
child: const Text("to PhotoView"),
onPressed: () => _toPhotoView(context),
);
}
void _toPhotoView(BuildContext context) {
Navigator.of(context).push(
MaterialPageRoute<dynamic>(
builder: (BuildContext context) => const PhotoViewPage(),
),
);
}
}
photo_view_page.dart
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
class PhotoViewPage extends StatelessWidget {
const PhotoViewPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return PhotoView(imageProvider: AssetImage("assets/image.png"));
}
}
Solution 1:[1]
The problem is coming from photo_view package.
In pubspec.yaml remove photo_view from dependecies
dependencies:
photo_view: ^0.13.0
Add:
dependency_overrides:
photo_view:
git:
url: https://github.com/bluefireteam/photo_view
ref: master
This way you will avoid errors in dependencies that come from the same version.
Solution 2:[2]
I'm not sure where the error was from, but switching flutter channel from master to stable fixed it.
flutter channel stable
flutter upgrade --force
Solution 3:[3]
To be honest you would be better off using InteractiveViewer than some unstable library for example
child: InteractiveViewer(
child: Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(color: Colors.transparent, borderRadius: BorderRadius.circular(0)),
child: CachedNetworkImage( imageUrl: image,
imageBuilder: (context, imageProvider) => Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5) ,
image: DecorationImage(
image: imageProvider, fit: BoxFit.scaleDown,
),
),
),
placeholder: (context, url) => const Center(child: CircularProgressIndicator(color: Colors.black,)),
errorWidget: (context, url, error) => const Icon(Icons.error),),
margin: const EdgeInsets.symmetric(horizontal: 20),
),
),
you archieve the same effect if all you need is to zoom in
OR
You can rebuild and stop using hot reload
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | |
Solution 2 | Yoann Far |
Solution 3 |