How to open multiple webview pages using bottom navigation

[baoxiehao]

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<WebViewPage> {
  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.

[feudadrien]

Same need

[gbmiranda]

up

[SEGVeenstra]

I need this also. I have 2 tabs which both contain WebviewScaffold() and 1 'normal' tab. Switching between 'normal' to any of the WebviewScaffolds works as expected. But switching between WebviewScaffolds results in infinite loading. If I first switch to the 'normal' tab and then back to a WebviewScaffold it all works.

First I thought it might be of the widget tree staying the 'same'. So I tried using keys but that didn't seem to work.

[subodhk01]

I need this thing too

[anumontu]

I also need this..did anyone find a solution for this ?

[subodhk01]

Using a Stack Widget can solve the problem, you can see a proper implementation here - https://github.com/subodhk01/nestin-app/blob/webview/lib/main.dart

[lahmidiamoumen]

the same problem!