The example code in this article can be downloaded in the wechat public number “01 binary” background reply “WebView” view

preface

As we know, there is often a need to open web pages when developing Native apps, and there are usually only two options available:

  1. Open a web page inside the App
  2. Open a web page by calling the system’s own browser

Take “wechat” for example, when we read the public account in wechat is the first case, but wechat also provides the option of Open with Browser, this is the second case.

A brief introduction to WebView in Android

To achieve the first effect, we need to use something called a WebView, so let’s see how to implement a WebView in Android.

In Android, we need to place WebView in a Layout, and then execute findViewById in the corresponding Activity or Fragment or various Custom views…

Well, Android developers must know what I’m talking about.

WebView in Flutter

The WebView of Flutter has been around for some time, but the most popular widgets can be found by searching the WebView on the Website of the Flutter community, as shown below:

Webview_flutter is an officially maintained WebView plug-in that inherits the StatefulWidget from the original and the Flutter SDK package, and is therefore supported as embedded in the Flutter Widget tree.

The flutter_webview_plugin is a Flutter plugin that encapsulates some of the basic usage apis that are native to the WebView and is therefore not embedded in the Flutter Widget tree. Therefore, the jump on the interface must be released first, and the return must be reinitialized, so the display will be a lot of restrictions;

Interactive_webview is a Flutter plug-in encapsulated by WebView_flutter, so the principle and characteristics are basically the same as the official WebView.

The official Webview_flutter plugin had a lot of problems in the early days of Flutter development in 2018, but the authorities didn’t give up. The plugin now has many bugs fixed and the basic features are being improved 👏.

Flutter_webview_plugin is not flexible to use due to its features, so in this article I will choose the official Webview_Flutter as the WebView plug-in for loading web pages.

use

The webview_flutter plugin is located at 👉https://pub.flutter-io.cn/packages/webview_flutter

Guide package

As with any Flutter package, we need to add the webview_flutter package under dependencies in pubspec. Yml

dependencies:
  webview_flutter: ^ 0.3.10 + 4
Copy the code

Then click on Packages GET that appears in the TAB bar, or on the terminal type Flutter Package GET in the order shown below:

Create a new Widget

Next we create a new WebViewWidget. This Widget takes two parameters, the title of the Browser page and the Url of the page to be viewed. I’ll name it Browser and store it in the browser.dart file.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class Browser extends StatelessWidget {
  const Browser({Key key, this.url, this.title}) : super(key: key);

  final String url;
  final String title;

  @override
  Widget build(BuildContext context) {
    returnScaffold( appBar: AppBar( title: Text(title), ), body: WebView( initialUrl: url, javascriptMode: JavascriptMode.unrestricted, ), ); }}Copy the code

Using this page

In this case, we have a new page to hold the WebView, so when we want to use it, all we need to do is jump to the page and pass in the title and url. Here’s an example of onPressed() for a RaisedButton

onPressed: () {
  Navigator.of(context)
      .push(new MaterialPageRoute(builder: (_) {
    return new Browser(
      url: "https://flutter-io.cn/",
      title: "Flutter Chinese Community",); })); }Copy the code

Do not forget to add to the info.plist file in the IOS module Runner:

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>
Copy the code

Otherwise, the package won’t work on iOS devices!

The running effect is shown in the figure below:

This is just a brief introduction to the Use of WebView in Flutter. Advanced features such as interacting with JavaScript are not covered. Interested readers can find the materials to read.

Is this the end?

In fact, it should have been over by now, but I found a serious problem in the process of using it. If our URL is HTTP instead of HTTPS, it only works on Android devices below 9.0 (iOS also does not work).

If you run on iOS you get a white screen, if you run on an Android 9.0+ device you get a NET: : ERR_CLEARTEXT_NOT_PERMITTED error.

The reason is quite simple, because both iOS and Android 9.0+ place some restrictions on non-HTTPS requests. Here is my solution.

iOS

We need to add the following fields to the info.plist file in the Runner of the IOS module:

<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
Copy the code

Then execute the Flutter clean and rerun to access the HTTP web page.

Android

Sorry, I haven’t found a way to access HTTP sites on Android 9.0+ via the WebView of my Flutter. I’m writing here in the hope that my readers can leave a comment if they find a solution. Here are some of the solutions I’ve tried.

In fact, if Android native wants to solve the HTTP limitation problem, there are several solutions:

  1. Switch to HTTPS
  2. willtargetSdkVersionChange the version number of < 28
  3. inAndroidManifest.xmlAdd to fileandroid:usesCleartextTraffic="true"Configuration items

The first solution is usually for your own site, since you can’t ask third-party sites to apply for an HTTPS certificate.

The second solution is not available with the Flutter because it requires Android SDK 28 or above to run.

I tried the third method, but it didn’t work.

I looked up a lot of information, but also found a curve to save the country, is to detect the web page to visit, if it is HTTPS use WebView access, if it is HTTP call a third party browser access.

Well, that’s not a good idea.

I have submitted questions on the StackOverflow and Flutter issues and will keep updating if there is a solution.

conclusion

In general, as Google continues to update the WebView control, the experience is getting better and easier to use than the native WebView. If you want to use the WebView in your App, try 😊

The example code in this article can be downloaded in the wechat public number “01 binary” background reply “WebView” view

reference

  1. How to use WebView in Flutter? – Little girl Android engineer experiment notes
  2. WebViews in Flutter – What an Amazing Breakthrough!
  3. Android 9: Cleartext HTTP traffic not permitted in webview