Preface:
The Flutter project needs to use WebView to load web pages. Here I use the plugins of Flutter and inappbrowser to load web pages inside the APP. Next, I will briefly summarize how to use WebView in Flutter, mainly including the implementation of WebView. The hyperlink of WebView opens the web page with the system browser and the hyperlink of WebView cannot load the exception handling of the web page.
Implementation steps:
1. Add sdk in pubspec.yaml
dependencies: ... cupertino_icons: ^0.1.0 flutter_inappbrowser: ^1.1.1 url_launcher: ^4.0.1+1
2. Implementation of WebView
import 'package:flutter_inappbrowser/flutter_inappbrowser.dart'; class CommonWebViewPageState extends State<CommonWebViewPage> { InAppWebViewController webView; String url = url; //Links to url @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("Title ")), body: new InAppWebView( initialUrl: url, onWebViewCreated: (InAppWebViewController controller) { webView = controller; }, onLoadStart: (InAppWebViewController controller, String url) { setState(() { this.url = url; }); }, ), ); } }
3. Hyperlink of WebView opens Web page with system browser
import 'package:flutter_inappbrowser/flutter_inappbrowser.dart'; import 'package:url_launcher/url_launcher.dart'; class CommonWebViewPageState extends State<CommonWebViewPage> { InAppWebViewController webView; String url = url; //Links to url @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("Title ")), body: InAppWebView( initialUrl: url, initialOptions: { "useShouldOverrideUrlLoading": true, //Set useShouldOverrideUrlLoading to true, otherwise it is invalid }, onWebViewCreated: (InAppWebViewController controller) { webView = controller; }, onLoadStart: (InAppWebViewController controller, String url) { setState(() { this.url = url; }); }, shouldOverrideUrlLoading: (InAppWebViewController controller, String url) { if (url.contains("android_asset")) { return false;//Open with webview } launch(url); return true; //Open with browser } ) ); } }
4. Exception handling of WebView hyperlink unable to load web page
4.1 add trust to HTTP in info.plist of iOS. (webview plug-in is unable to load HTTP requests in iOS, although Flutter can load HTTP requests. There are differences between Flutter and iOS framework, and Flutter is independent of UIKit framework.)
<key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> </dict>
4.2 set the networkSecurityConfig property in the Android manifest file. (before Android 9.0, there was no exception during use But after Android 9.0, HTTP is not supported, so trust must also be added.)
<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" package="Project package name"> <application android:name="io.flutter.app.FlutterApplication" android:label="entry name" android:icon="@mipmap/ic_launcher" android:networkSecurityConfig="@xml/network_security_config"> </application> </manifest>
4.3 create network security config.xml under the Android resource folder res/xml
<?xml version="1.0" encoding="utf-8"?> <network-security-config> <base-config cleartextTrafficPermitted="true"> <trust-anchors> <certificates src="system" /> </trust-anchors> </base-config> </network-security-config>
5. summary
The function of using WebView to load web pages on Flutter has been realized. Welcome to watch. If you have any questions, please contact me with a message!