Repository: flutter
Issue: Error: Unexpected null value while navigating from tab1 to tab 2 (Flutter Web - Using HTMLElementView)
Labels: c: crash,framework,platform-web,has reproducible steps,P2,found in release: 3.7,found in release: 3.9,team-web,triaged-web

Hi, simple use of HTMLElementView is causing issues in my app.

My code is as follows:

<details><summary>Code</summary>

```
import 'dart:html';
import 'package:myPackage/constants.dart';
import 'package:myPackage/contentProvider/contentProvider.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'dart:html' as html;
import 'dart:js' as js;
import 'dart:ui' as ui;

class Payment extends StatefulWidget {
  @override
  _PaymentState createState() => _PaymentState();
}

String viewID = "myView";
String urlOnline = "myURL";
String urlLocal = "my localhost url";
bool online = true;


class _PaymentState extends State<Payment> {
  IFrameElement element;
  @override
  Widget build(BuildContext context) {
    double total = Provider.of<CP>(context).getTotal();
    // ignore:undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
        viewID,
            (int id) {
             element = html.IFrameElement();
             window.onMessage.forEach((element) {
                if(element.data=='Authorised'){
                  print("Successful payment");
                  Navigator.pop(context); // This throws the error explained above
                } else if(element.data=='Pending'){
                  print('PAYMENT Pending');
                }else if(element.data=='Refused'){
                  print('PAYMENT Refused');
                }
             });
                element.width = MediaQuery.of(context).size.width.toString();
                element.height = MediaQuery.of(context).size.height.toString();
                element.src = online? urlOnline : urlLocal;
                element.style.border = 'none';
                return element;
            }
    );
    return Scaffold(
      appBar: AppBar(
        iconTheme: IconThemeData(
          color: Colors.white, //change your color here
        ),
        elevation: 0.0,
        title: Text("PAYMENT", style: Header),
        backgroundColor: Provider.of<CP>(context, listen: false).primary,
      ),
      backgroundColor: Color(0xfff6f7f8),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(13.0),
            child: Text('Please enter your payment details'),
          ),
          Expanded(
            child: Container(
              child: HtmlElementView(
                viewType: viewID,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

```
</details>

Anytime I move away from this page I get the following error:

```
Error: Looking up a deactivated widget's ancestor is unsafe.
At this point the state of the widget's element tree is no longer stable.
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.
```
If I press back button on my appear I get the dependency error. Is this a problem with flutter? I have checked other examples online and they have done things in a similar way so I am not sure what the problem is here?

Flutter Doctor Output:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.25.0-5.0.pre.90, on Mac OS X 10.15.7 19H2 darwin-x64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 12.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] Connected device (2 available)

• No issues found!