Home > OS >  How to show Loading Indicator in InAppWebView Flutter? (flutter_inappwebview)
How to show Loading Indicator in InAppWebView Flutter? (flutter_inappwebview)

Time:08-03

I want to show Loading first before the web view data is displayed on the screen. How can do that using the flutter_inappwebview package?

This is my code:

  home: Scaffold(
    body: Stack(
      children: [
        isLoading
            ? const Center(child: CircularProgressIndicator())
            : const SizedBox(),
        Column(
          children: [
            const SizedBox(height: 30),
            Expanded(
              child: InAppWebView(
                key: _key,
                onl oadStop: (controller, url) {
                  setState(() {
                    isLoading = false;
                  });
                },
                initialUrlRequest: URLRequest(
                    url: Uri.parse('https://example.com/')),
                initialOptions: InAppWebViewGroupOptions(
                  crossPlatform: InAppWebViewOptions(
                    mediaPlaybackRequiresUserGesture: false,
                  ),
                ),
                androidOnPermissionRequest:
                    (InAppWebViewController controller, String origin,
                        List<String> resources) async {
                  return PermissionRequestResponse(
                    resources: resources,
                    action: PermissionRequestResponseAction.GRANT,
                  );
                },
              ),
            ),
          ],
        )
      ],
    ),
  )

CodePudding user response:

Use Stack to layout a loading indicator on the top of InAppWebView. Then use onLoadStart and onLoadStop to control the visibility of the loading indicator.

  • Related