fluttercommunity / fluttercommunity/flutter_webview_plugin

How to open multiple webview pages using bottom navigation

Open
#449 7 comments 7 reactions 0 assignees View on GitHub
Dominant language
Java
Stars
1.5k
Forks
938
PR merge metrics
No merged PRs in 30d

Description

```dart
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:insight_bank/generated/i18n.dart';
import 'package:insight_bank/navigation/router.dart';
import 'package:insight_bank/util/layouts.dart';
import 'package:insight_bank/util/logger.dart';
import 'package:insight_bank/util/utils.dart';
import 'package:insight_bank/widgets/presentation/common/common_widgets.dart';

class WebViewPage extends StatefulWidget {
final String url;
final String title;
final bool hasAppBar;
final bool hasScrollBar;
final Widget bottomNavigationBar;

const WebViewPage(
this.url, {
this.title,
this.hasAppBar = true,
this.hasScrollBar = true,
this.bottomNavigationBar,
Key key,
}) : super(key: key);

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

class _WebViewPageState extends State {
final Logger _logger = Logger.tag('Webview');

String _title;
final _webViewPlugin = FlutterWebviewPlugin();

@override
void initState() {
super.initState();
_title = widget.title;
Logger.tagD('.... url: ${widget.url}');
_webViewPlugin.onStateChanged.listen((state) async {
if (state.type == WebViewState.startLoad) {
_logger.d('web page [${widget.url}] loading...');
}
if (state.type == WebViewState.finishLoad) {
String script = 'window.document.title';
final title = await _webViewPlugin.evalJavascript(script);
if (_title != title) {
_logger.d('web page title updated to $title');
setState(() {
_title = title;
});
}
}
});
_webViewPlugin.onDestroy.listen((_) {
if (Navigator.canPop(context)) {
Navigator.of(context).pop();
}
});
}

@override
Widget build(BuildContext context) {
_title = _title ?? S.of(context).hintLoading;

final appBar = widget.hasAppBar
? AppBar(
backgroundColor: L.scaffoldBackgroundColor,
title: TextWidget.title(_title),
leading: IconButton(
icon: Icon(Icons.arrow_back),
color: L.black,
onPressed: () => Router.pageBack(context),
),
)
: PreferHeightWidget(
height: L.s(L.statusBarHeightInPixel),
color: L.primaryColor,
);

return MaterialApp(
theme: Theme.of(context),
home: WebviewScaffold(
key: ObjectKey(widget.url),
appBar: appBar,
url: widget.url,
scrollBar: widget.hasScrollBar,
hidden: true,
withJavascript: true,
bottomNavigationBar: widget.bottomNavigationBar,
resizeToAvoidBottomInset: true,
initialChild: Container(
color: L.primaryColor,
child: Center(
child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation(L.white)),
),
),
),
);
}
}
```

I have a HomePage widget which contains a BottomNavigationBar, and there are 3 tabs in it.
The first page is a normal flutter page, and the 2nd and 3rd pages are webview pages with different urls. But when I tap on 2nd page at first, 2nd web page will be load and 3rd will NOT, vice versa.

The logs shows that the 3rd page's initState was called, but there is no actual page loading.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.