Flutter Webview change webpage is not available Flutter Webview change webpage is not available dart dart

Flutter Webview change webpage is not available


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!


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:');        },    );