Flutter Webview change webpage is not available

android webview dart flutter android-webview

9,448

Solution 1

You can try my plugin flutter_inappwebview. It has events to manage errors while the WebView is loading an url (onLoadError event) and when it receives HTTP errors, such as 403, 404, etc (onLoadHttpError event).

Full example with working code that loads a custom error page if the user doesn't have internet connection:

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: InAppWebViewPage()
    );
  }
}

class InAppWebViewPage extends StatefulWidget {
  @override
  _InAppWebViewPageState createState() => new _InAppWebViewPageState();
}

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  InAppWebViewController webView;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("InAppWebView")
        ),
        body: Container(
            child: Column(children: <Widget>[
              Expanded(
                child: Container(
                  child: InAppWebView(
                    initialUrl: "https://flutter.dev/",
                    initialHeaders: {},
                    initialOptions: InAppWebViewWidgetOptions(
                        inAppWebViewOptions: InAppWebViewOptions(
                          debuggingEnabled: true,
                        ),
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      webView = controller;
                    },
                    onLoadStart: (InAppWebViewController controller, String url) {

                    },
                    onLoadStop: (InAppWebViewController controller, String url) {

                    },
                    onLoadError: (InAppWebViewController controller, String url, int code, String message) async {
                      print("error $url: $code, $message");

                      var tRexHtml = await controller.getTRexRunnerHtml();
                      var tRexCss = await controller.getTRexRunnerCss();

                      controller.loadData(data: """
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
    <style>$tRexCss</style>
  </head>
  <body>
    $tRexHtml
    <p>
      URL $url failed to load.
    </p>
    <p>
      Error: $code, $message
    </p>
  </body>
</html>
                  """);
                    },
                    onLoadHttpError: (InAppWebViewController controller, String url, int statusCode, String description) async {
                      print("HTTP error $url: $statusCode, $description");
                    },
                  ),
                ),
              ),
            ]))
    );
  }
}

The result is:

This example loads directly an html source, but you can load an html file from the assets folder or an url.

Just for fun: my plugin includes the javascript and css code of the Google Chrome t-rex game!

Solution 2

Just Add onWebResourceError method to your Webview.

    WebView(
        onWebResourceError: (WebResourceError webviewerrr) {
            print("Handle your Error Page here");
        },
        initialUrl: "your url"
        javascriptMode: JavascriptMode.unrestricted,
        onPageFinished: (String url) {
            print('Page finished loading:');
        },
    );

9,448

Author by

Juliano Braz

Updated on December 10, 2022

Comments

Juliano Braz over 1 year
I wanna change the "Webpage not available", in my WebView application, if the user doesn't have internet.

I read the documentation, and try some another puglins
```
import 'package:webview_flutter/webview_flutter.dart';
[...]
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const WebView(
        initialUrl: 'https://google.com',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}
```
- Mazin Ibrahim about 5 years
  
  You can render a local html file when there's no connection as showed in this answer stackoverflow.com/questions/53831312/…
- Juliano Braz about 5 years
  
  I ve try this, and the Medium post to, but doesnt have the error handiling, showing the screen WebPage not avaiable
- Juliano Braz about 5 years
  
  I chance the plugin and use url_launcher, encapsuled with try catch block statement, solving the problem
- Mazin Ibrahim about 5 years
  
  glad to hear that !
Malbolged over 3 years

using a plugin to fix something isn't a solution ! either explain how your plugin solves the problem or just add a comment...