Implementation of Flutter In App Web View
To use web applications in any Flutter app we use InAppWebView plugin.
to Install it first open the terminal in android studio and run the following command:
flutter pub add flutter_inappwebview
then it is added to dependencies.
Now, import the package in the file where you want to use web view
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
After importing,
define a web view controller and refresh controller (if needed)
we can listen to a lot of events and use the InAppWebViewController to control InAppWebView instances!
final Completer<InAppWebViewController> _controller = Completer<InAppWebViewController>();
InAppWebViewController? webViewController;
PullToRefreshController? pullToRefreshController;
PullToRefreshSettings pullToRefreshSettings = PullToRefreshSettings(
color: ColorConstant.blue,
);
bool pullToRefreshEnabled = true;
Now, in body inside widget build use it as
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
:import 'dart:async';
import 'package:flutter/material.dart';
class _MyAppState extends State<MyApp> {
final GlobalKey webViewKey = GlobalKey();
InAppWebViewController? webViewController;
InAppWebViewSettings settings = InAppWebViewSettings(
mediaPlaybackRequiresUserGesture: false,
allowsInlineMediaPlayback: true,
iframeAllow: "camera; microphone",
iframeAllowFullscreen: true);
PullToRefreshController? pullToRefreshController;
String url = "";
double progress = 0;
final urlController = TextEditingController();
@override
void initState() {
super.initState();
//in order to reload the webpage inside the inappwebview we use in app webview pulltorefreshcontroller and manage its actions
pullToRefreshController = kIsWeb
? null
: PullToRefreshController(
settings: PullToRefreshSettings(
color: Colors.blue,
),
onRefresh: () async {
if (defaultTargetPlatform == TargetPlatform.android) {
webViewController?.reload();
} else if (defaultTargetPlatform == TargetPlatform.iOS) {
webViewController?.loadUrl(
urlRequest:
URLRequest(url: await webViewController?.getUrl()));
}
},
);
}
@override
Widget build(BuildContext context) {
body: Container(
child: Column(children: <Widget>[
Expanded(
child: Container(
height: MediaQuery.of(context).size.height,
child: Stack(
children: [
InAppWebView(initialUrlRequest:
URLRequest(url: WebUri("https://flutter.dev")) //pass the URL inside the double quotes which you want to use
)
androidOnGeolocationPermissionsShowPrompt:
(InAppWebViewController controller,
String origin) async {
return GeolocationPermissionShowPromptResponse(
origin: origin, allow: true, retain: true);
}, //in order to use Geolocation inside the web view , give this permission
//Initial options is a set of settings that are given from it to enable javascripts, zoom controls and playbacks etc.
initialOptions: InAppWebViewGroupOptions(
android: AndroidInAppWebViewOptions(
allowFileAccess: true, //Enables File access
databaseEnabled: true, // Enables the WebView database
domStorageEnabled: true, // Enables DOM storage
builtInZoomControls:
true, // Enables the built-in zoom controls
displayZoomControls:
false, // Disables displaying zoom controls
safeBrowsingEnabled: true, // Enables Safe Browsing
clearSessionCache: true,
),
//the options may differ from ios to android as operating system settings may differ
ios: IOSInAppWebViewOptions(
allowsInlineMediaPlayback: true,
),
crossPlatform: InAppWebViewOptions(
javaScriptEnabled: true,
useOnDownloadStart: true,
allowFileAccessFromFileURLs: true,
allowUniversalAccessFromFileURLs: true,
),
),
onWebViewCreated: (controller) {
webViewController = controller;
_controller.complete(controller);
},
pullToRefreshController: pullToRefreshController,
//to add loaders in the webview , we can add and manipulate using onLoadStart anf OnLoadStop and onLoadError
onLoadStart: (controller, url) {
return setState(() {
//implement loaders
});
},
onLoadStop: (controller, url) {
pullToRefreshController?.endRefreshing();
return setState(() {
//implement loaders
});
},
onReceivedError: (controller, request, error) {
pullToRefreshController?.endRefreshing();
},
onProgressChanged: (controller, progress) {
if (progress == 100) {
pullToRefreshController?.endRefreshing();
}
},
onConsoleMessage: (controller, consoleMessage) {
print(
"JavaScript console message: ${consoleMessage.message}");
},
//we can also download files from the inappwebview using Downloadrequest
onDownloadStartRequest: (controller, url) async {
//implement feature
},
//we can initialise the settings we needed for InappWebview
initialSettings: InAppWebViewSettings(
allowContentAccess: true,
javaScriptEnabled: true,
loadsImagesAutomatically: true,
safeBrowsingEnabled: true,
javaScriptCanOpenWindowsAutomatically: true,
useOnDownloadStart: true,
allowsLinkPreview: true,
),),],),),)
])), ),);
It is said the InAppWebView is an Ocean, we can use any number of features using it,
we can also Implement a web browser like safari/chrome using InAppWebBrowser
InAppBrowser or ChromeSafariBrowser to open an in-app browser! ChromeSafariBrowser is based on Chrome Custom Tabs on Android and on SFSafariViewController on iOS.
Create a Class that extends the InAppBrowser/ChromeSafariBrowser Class in order to override the callbacks to manage the browser events.
We can also use a headless inappwebview
A headless browser is a web browser without a graphical user interface.
It can be used to run a WebView in background without attaching an InAppWebView to the widget tree.
As InAppWebView, it has the same options and events. Use InAppWebViewController to control the headless WebView instance.