ปัญหาการโหลด WebView หลายรายการ Flutter

ฉันใช้ Webview หลายรายการกับBottomNavigationBarItemแท็บแยกและโหลดต่างกันURLในแต่ละแท็บ

ปัญหาคือเมื่อเปิดขึ้นก่อน TAB URL แรกจะโหลดสมบูรณ์ แต่เมื่อฉันแตะที่แท็บที่สองที่แสดงแท็บแรก Webview แท็บที่สามมีข้อความปกติWidgetหากกลับมาจากแท็บที่สามแล้วจะทำงานได้อย่างสมบูรณ์ แต่คลิกที่แท็บแรกและแท็บที่สองแสดงURLโค้ดของฉันที่โหลดล่าสุดอยู่ที่นี่เสมอ

โฮมคลาส

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'web_view_container.dart';

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {

  int _selectedIndex = 0;

  static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

  List<Widget> _widgetOptions = <Widget>[
    WebViewContainer('https://offerscouponsdeals.in/'),
    WebViewContainer('https://flutter.io'),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('RSVP App'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

คลาสคอนเทนเนอร์ WebView

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class _WebViewContainerState extends State < WebViewContainer >{
  var _url;
  final _key = UniqueKey();
  _WebViewContainerState(this._url);
  num _stackToView = 1;

  void _handleLoad(String value) {
    setState(() {
      _stackToView = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: IndexedStack(
          index: _stackToView,
          children: [
            Column(
              children: < Widget > [
                Expanded(
                    child: WebView(
                      key: _key,
                      javascriptMode: JavascriptMode.unrestricted,
                      initialUrl: _url,
                      onPageFinished: _handleLoad,
                    )
                ),
              ],
            ),
            Container(
              color: Colors.white,
              child: Center(
                child: CircularProgressIndicator(),
              ),
            ),
          ],
        )
    );
  }
}

class WebViewContainer extends StatefulWidget {
  final url;
  WebViewContainer(this.url);
  @override
  createState() => _WebViewContainerState(this.url);
}

ใครช่วยบอกทีว่าฉันผิดตรงไหน? ขอบคุณล่วงหน้า

สุดท้ายฉันได้ทำกับ WebViewController Here is ตอบหลาย Webview reload ด้วย Loader

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {

  final _key = UniqueKey();
  bool _isLoadingPage;
  WebViewController controller;
  int _selectedIndex = 0;

  List<String> arr_links = [
    'https://pub.dev/',
    'https://flutter.io',
    'https://www.google.com/',
  ];

  @override
  void initState() {
    super.initState();
    _isLoadingPage = true;
  }


  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Multiple WebView'),
      ),
      body: Stack(
        children: <Widget>[
          WebView(
            key: _key,
            initialUrl: arr_links[_selectedIndex],
            javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            controller = webViewController;
          },
            onPageFinished: (finish) {
              setState(() {
                _isLoadingPage = false;
              });
            },
          ),
          _isLoadingPage ? Scaffold(
            body: Center(
              child: CircularProgressIndicator(
                valueColor: new AlwaysStoppedAnimation<Color>(
                    Colors.white),
              ),
            ),
            backgroundColor: Colors.black.withOpacity(
                0.70), // this is the main reason of transparency at next screen. I am ignoring rest implementation but what i have achieved is you can see.
          ) : Stack()
        ],
      ),

      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
      _isLoadingPage = true;
      controller.loadUrl(arr_links[_selectedIndex]);
    });
  }
}

เพิ่มสิ่งนี้ลงในpubspec.yamlไฟล์ของแพ็คเกจของคุณ:

dependencies:
  webview_flutter: ^0.3.22+1