error with PhotoView : Looking up a deactivated widget's ancestor is unsafe

Question

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"));
  }
}

Answer 1

UPDATE - Fixed in photo_view 0.14.

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.

Answer 2

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