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