I'm using InAppWebView
in Flutter
It's for a hybrid simple application, which is only a webview, some services, and flutter_native_slpah
Sometimes the web page won't load, but when I turn the screen off and on again, or as soon as I push back button (which triggers a confirmation dialog) the whole page is shown.
InAppWebView(
initialUrlRequest: URLRequest(
url: Uri.parse(base + 'login')
),
initialOptions: InAppWebViewGroupOptions(
android: AndroidInAppWebViewOptions(
disableDefaultErrorPage: false,
// useHybridComposition: true,
supportMultipleWindows: false,
cacheMode: AndroidCacheMode.LOAD_DEFAULT,
),
crossPlatform: InAppWebViewOptions(
javaScriptEnabled: true,
mediaPlaybackRequiresUserGesture: false,
// debuggingEnabled: true,
),
),
onWebViewCreated: (InAppWebViewController controller) {
webViewController = controller;
controller.addJavaScriptHandler(handlerName: 'FLUTTER', callback: (args) {
final Map<String, dynamic> data = json.decode(args[0]);
handler(data);
});
},
onLoadStop: (InAppWebViewController controller, Uri uri) {
// FlutterNativeSplash.remove();
},
androidOnPermissionRequest: (InAppWebViewController controller, String origin, List<String> resources) async {
return PermissionRequestResponse(resources: resources, action: PermissionRequestResponseAction.GRANT);
}
);
I've tried updating url after it's loaded by the controller, still the problem remains after splash.
The webview is wrapped like below in widget:
return WillPopScope(
child: Scaffold(
body: Column(children: <Widget>[Expanded(child: webView)])
),
onWillPop: _goBack
);
You can use the IndexedStack widget to show a loading widget when your WebView has not loaded the URL yet and then when loading WebView is finished show the InAppWebView widget.
Here I created a sample code to show what I mean:
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
class InAppWebViewPage extends StatefulWidget {
final String title, uri;
const InAppWebViewPage({Key? key, required this.title, required this.uri})
: super(key: key);
@override
_InAppWebViewPageState createState() => _InAppWebViewPageState();
}
class _InAppWebViewPageState extends State<InAppWebViewPage> {
int _stackIndex = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: EdgeInsets.all(12),
child: Expanded(
child: IndexedStack(
index: _stackIndex,
children: [
InAppWebView(
initialUrlRequest: URLRequest(url: Uri.parse(widget.uri)),
initialOptions: InAppWebViewGroupOptions(
crossPlatform:
InAppWebViewOptions(useShouldOverrideUrlLoading: true),
),
onLoadStop: (_, __) {
setState(() {
_stackIndex = 0;
});
},
onLoadError: (_, __, ___, ____) {
setState(() {
_stackIndex = 0;
});
//TODO: Show error alert message (Error in receive data from server)
},
onLoadHttpError: (_, __, ___, ____) {
setState(() {
_stackIndex = 0;
});
//TODO: Show error alert message (Error in receive data from server)
},
),
const SizedBox(
height: 50,
child: CircularProgressIndicator(),
),
],
),
),
),
);
}
}