Flutter Stacked widget with Webview is not showing progressIndicator-CodePudding

override
  Widget build(BuildContext context) {
    return WillPopScope(
        child: Scaffold(
            backgroundColor: Colors.white,
            bottomNavigationBar: _bottomTab(),
            appBar: AppBar(
              title: Text('View '   type),
            ),
            body: Stack(
              children: [
                Container(
                  child: WebviewScaffold(
                    url: weburl,
                    displayZoomControls: true,
                    withJavascript: true,
                    scrollBar: true,
                    withZoom: true,
                    hidden: true,
                  ),
                ),
                Visibility(
                  visible: _isLoading,
                  child: Align(
                  alignment: Alignment.center,
                  child: CircularProgressIndicator(),
                ))
              ],
            )),
        onWillPop: backPress);
  }
Widget _bottomTab() {
    return BottomNavigationBar(
      backgroundColor: Colors.grey,
      items: [
        BottomNavigationBarItem(
            icon: Icon(Icons.contact_page), label: "Dashboard"),
        BottomNavigationBarItem(icon: Icon(Icons.call), label: "Call"),
        BottomNavigationBarItem(
            icon: Icon(Icons.download_rounded), label: "Download"),
        BottomNavigationBarItem(icon: Icon(Icons.share), label: "Share"),
      ],
      type: BottomNavigationBarType.shifting,
      selectedItemColor: Colors.black,
      unselectedItemColor: Colors.grey,
      onTap: _onItemTapped,
    );
  }
 void _onItemTapped(int index) {
    switch (index) {
      case 0:
        break;

      case 1:
        _makingPhoneCall();
        break;

      case 2:
        setState(() {
          _isLoading = true;
          getPermission('download');
        });
        break;

      case 3:
        setState(() {
          _isLoading = true;
          getPermission('share');
        });
        break;
    }
  }

I have a webview with bottom navigation whenever i click bottom navigation i want to show progress indicator at the center of the webview.I tried stack widget with button and progressindicator its working but when i try to show the progress indicator with webview its not showing anything

Note: Show progress indicator at center of webview when bottom navigation is clicked

Thanks in Advance!

CodePudding user response：

Wrap Visibility widget in Positioned widget Like this

Positioned.fill(
      child: Align(
        alignment: Alignment.centerRight,
        child: Visibility(
                      visible: _isLoading,
                      child: CircularProgressIndicator(),
                    )               
      ),
    ),

if this is not working then you can add initial child in WebviewScaffold like this

 WebviewScaffold(
                initialChild: Center(child: CircularProgressIndicator()),
              
                url: weburl,
                displayZoomControls: true,
                withJavascript: true,
                scrollBar: true,
                withZoom: true,
                hidden: true,
              ),

Or you can also use

You can use the hide method to hide the webview whenever you want to display the progress.

Code:

final FlutterWebviewPlugin webviewPlugin = new FlutterWebviewPlugin() ;

// when displaying the progress

webviewPlugin. hide() ;

CodePudding user response：

Can you try the below code?

package: webview_flutter

bool isLoading = true;


Stack(
  children:[ 
    WebView(
      javascriptMode: JavascriptMode.unrestricted,
      onPageStarted: (value){
        setState(() {
          isLoading = true;
        });
      },
      onPageFinished: (value){
        setState(() {
          isLoading = false;
        });
      },
      initialUrl: “Your URL”),
    isLoading == true? Center(child: CircularProgressIndicator()):Offstage()
    ])