How can I dispose Flutter WebviewScaffold on screen change?

Question

I have a main screen that shows a header image with button to route to second screen, and a webview(scaffold) in a container below it. When I change to the second screen, the webview is still there. This seems to be a similar problem to this one (Flutter: to close a webview when you left the page), but I can't figure out how to implement the dispose event. Can anyone help? I am using the flutter_webview_plugin package. Here is my code:

import 'package:flutter/material.dart';

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

import 'dart:async';

import './SecondScreen.dart';

String selectedUrl = 'https://flutter.io';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  final flutterWebViewPlugin = FlutterWebviewPlugin();

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Generated App',
      theme: new ThemeData(
        primarySwatch: Colors.purple,
        primaryColor: const Color(0xFF8e80a8),
        accentColor: const Color(0xFF8e80a8),
        canvasColor: const Color(0xFF8e80a8),
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {


  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Color(0xFF8e80a8)),
      child: new Column(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.fromLTRB(10, 30, 10, 5),
              child: new Image.asset(
                'lib/assets/newoldralogo1.png',
              ),
            ),
            Container(
              constraints: BoxConstraints.expand(
                height:
                    Theme.of(context).textTheme.display1.fontSize * 1.1 + 10.0,
              ),
              child: new Stack(fit: StackFit.expand,
                  children: <Widget>[
                Container(
                  decoration: BoxDecoration(color: Color(0xFF8e80a8)),
                  child: Padding(
                    padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
                    child: Image.asset(
                      "lib/assets/newoldralogo1.png",
                      alignment: Alignment.topCenter,
                      fit: BoxFit.fitWidth,
                    ),
                  ),
                ),
                Container(
                  child: RaisedButton(
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => SecondScreen()),
                      );
                    },
                    color: Color(0xFFFFFF),
                  ),
                ),
              ]),
            ),

            Container(
              constraints: BoxConstraints.expand(
                height:
                    Theme.of(context).textTheme.display1.fontSize * 1.1 + 300.0,
              ),
              padding: const EdgeInsets.fromLTRB(10, 15, 10, 5),
              color: Color(0xFF8e80a8),
              alignment: Alignment.center,
              child: Container(
                child: WebviewScaffold(
                  url:
                      ('https://flutter.io/'),
                ),
              ),
            )
          ]),
    );
  }
}

/*
@override
void dispose() {
  super.dispose();
  _MyHomePageState();

}
*/

In order for us to be able to help please post what you have tried and what errors you are getting. — Oswin Noetzelmann, Jan 06 '19 at 20:19
Obviously, I am pretty new to all of this. Thank you for your patience and help. — FuriousBunny, Jan 06 '19 at 22:53
I have tried to add the @override void dispose thing in a couple of places in the code to dispose the webviewscaffold widget, but it hasn't worked. I have it commented out in the code sample above. — FuriousBunny, Jan 08 '19 at 15:53

FuriousBunny · Accepted Answer · 2019-01-08T20:59:26.623

A solution is to change the "Navigator.push" to "Navigator.pushRemove." This will mean that the first screen will not reappear, so pressing the back button (on an Android device, at least) will exit the app. It's not quite what I was trying to do, but will work for now.

If anyone could show me where to put the "dispose" thing, I would still love to know! In the meantime, I will just keep plugging along. Thanks to those who have shared so much helpful information around the web!

By the way, here is the new code, cleaned up a bit:

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import './SecondScreen.dart';

class WebView extends StatefulWidget {
  @override
  _WebViewState createState() => _WebViewState();
}

class _WebViewState extends State<WebView> {
  TextEditingController controller = TextEditingController();
  FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin();
  var urlString =
      "https://stackoverflow.com/questions/43692923/flutter-container-onpressed";

  launchUrl() {
    setState(() {
      urlString = controller.text;
      flutterWebviewPlugin.reloadUrl(urlString);
    });
  }

  @override
  void initState() {
    super.initState();
    flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged wvs) {
      print(wvs.type);
    });
  }

  //this part isn't working
  @override
  void dispose() {
    _WebViewState();
    // close the webview here
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Color(0xFF8e80a8)),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          new GestureDetector(
            onTap: () {
              Navigator.pushReplacement(
                context,
                MaterialPageRoute(builder: (context) => SecondScreen()),
              );
            },
            child: Padding(
              padding: const EdgeInsets.fromLTRB(10, 40, 10, 10),
              child: new Container(
                  constraints: BoxConstraints.expand(
                    height: Theme.of(context).textTheme.display1.fontSize * 1.1 +
                        40.0,
                  ),
                  child: new Image.asset(
                    'lib/assets/newoldralogo1menubutton3.png',
                    alignment: Alignment.topCenter,
                    fit: BoxFit.fitWidth,
                  )),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: Container(
              constraints: BoxConstraints.expand(
                height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 250.0,
              ),
              child: WebviewScaffold(
                url: urlString,
                withZoom: false,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

score 0 · Answer 2 · answered Aug 18 '20 at 10:24

Hiding the web view when the user navigates to the second screen

flutterWebViewPlugin.hide();

and showing it again when the user navigates back

flutterWebViewPlugin.show();

should solve the issue. By using this way user can navigate back to the first screen after navigating to the second screen.

Remember to await the Navigator.push() to the second screen.

import 'package:flutter/material.dart';

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

import 'dart:async';

import './SecondScreen.dart';

String selectedUrl = 'https://flutter.io';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  final flutterWebViewPlugin = FlutterWebviewPlugin();

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Generated App',
      theme: new ThemeData(
        primarySwatch: Colors.purple,
        primaryColor: const Color(0xFF8e80a8),
        accentColor: const Color(0xFF8e80a8),
        canvasColor: const Color(0xFF8e80a8),
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {


  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Color(0xFF8e80a8)),
      child: new Column(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.fromLTRB(10, 30, 10, 5),
              child: new Image.asset(
                'lib/assets/newoldralogo1.png',
              ),
            ),
            Container(
              constraints: BoxConstraints.expand(
                height:
                    Theme.of(context).textTheme.display1.fontSize * 1.1 + 10.0,
              ),
              child: new Stack(fit: StackFit.expand,
                  children: <Widget>[
                Container(
                  decoration: BoxDecoration(color: Color(0xFF8e80a8)),
                  child: Padding(
                    padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
                    child: Image.asset(
                      "lib/assets/newoldralogo1.png",
                      alignment: Alignment.topCenter,
                      fit: BoxFit.fitWidth,
                    ),
                  ),
                ),
                Container(
                  child: RaisedButton(
                    onPressed: () async {
                      flutterWebViewPlugin.hide();
                      await Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => SecondScreen()),
                      );
                      flutterWebViewPlugin.show();
                    },
                    color: Color(0xFFFFFF),
                  ),
                ),
              ]),
            ),

            Container(
              constraints: BoxConstraints.expand(
                height:
                    Theme.of(context).textTheme.display1.fontSize * 1.1 + 300.0,
              ),
              padding: const EdgeInsets.fromLTRB(10, 15, 10, 5),
              color: Color(0xFF8e80a8),
              alignment: Alignment.center,
              child: Container(
                child: WebviewScaffold(
                  url:
                      ('https://flutter.io/'),
                ),
              ),
            )
          ]),
    );
  }
}

How can I dispose Flutter WebviewScaffold on screen change?

2 Answers2