How can I dispose Flutter WebviewScaffold on screen change? - webview

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();
}
*/

Answer 1

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,
),
),
),
],
),
);
}
}

Answer 2

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/'),
),
),
)
]),
);
}
}