Flutter Webview change webpage is not available

Question

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

You can render a local `html` file when there's no connection as showed in this answer https://stackoverflow.com/questions/53831312/how-to-render-a-local-html-file-with-flutter-dart-webview — Mazin Ibrahim, Mar 23 '19 at 15:10
I ve try this, and the Medium post to, but doesnt have the error handiling, showing the screen WebPage not avaiable — Juliano Braz, Mar 23 '19 at 15:15
I chance the plugin and use url_launcher, encapsuled with try catch block statement, solving the problem — Juliano Braz, Mar 26 '19 at 11:36

SANDEEP SREESHAN · Answer 1 · 2020-05-08T13:33:19.650

6

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

edited May 08 '20 at 13:33

answered May 08 '20 at 13:26

SANDEEP SREESHAN

71
1
5

Lorenzo Pichilli · Answer 2 · 2019-11-29T20:32:08.090

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!

using a plugin to fix something isn't a solution ! either explain how your plugin solves the problem or just add a comment... — Malbolged, Jan 15 '21 at 16:29

Flutter Webview change webpage is not available

2 Answers2

Linked