1. Demand background

Implement an incomplete screen, support to load local HTML resources of the Webview

2. Conclusion first

The official webview_flutter is selected. Summarized the process of practice, analysis of several plug-ins have the following characteristics:

flutter_inappwebview:

Question:

1. The keyboard sometimes doesn’t retract.

2. The text box does not respond to text input

3. Js -> Flutter does not work on some Android models. The analysis shows that the NATIVE JS interface is not called back, and the native JS interface (setJavaScriptEnable is true) appears with high frequency probability, and the harm degree can be said to be fatal.


Advantage:

1. Load local H5 resources

2, support without full screen.

In addition to the above problems, especially the js call problem. Otherwise, the framework is perfectly suited to the current scenario.


flutter_webview_plugin

1. Full screen only

2. The local H5 cannot be loaded

3. No keyboard problem exists

The requirements interface consists of a mix of flutter UI and WebView. At the same time load local H5 to parse into a string after display, feel a bit of trouble, quite unreliable feeling. Many problems, give up.


webview_flutter:

1. Solved the keyboard problem (it is experimental at present, there is still a chance of problems, but it still works)

2. The IOS terminal does not support loading local HTML.

3. Official plug-ins.


3. Optimization process

Finally, webview_flutter is selected. The next step is to solve the problem of not supporting loading native HTML.

On Android, to load local HTML, just use:

"file:///android_asset/flutter_assets/assets/index.htmlCopy the code

To load the local HTML.

Once the APK is pressurized, you can see that the assets of the flutter are packed into the folder flutter_assets. Can be viewed by pressurized APK. To find the local HTML, follow the Android WebView loadUrl to load the local HTML.


And on the IOS side, load the HTML is implemented as follows: https://github.com/flutter/plugins/blob/master/packages/webview_flutter/ios/Classes/FlutterWebView.m

- (bool)loadUrl:(NSString*)url withHeaders:(NSDictionary<NSString*, NSString*>*)headers {  NSURL* nsUrl = [NSURL URLWithString:url];  if(! nsUrl) {return false; NSMutableURLRequest* Request = [NSMutableURLRequest requestWithURL:nsUrl]; [requestsetAllHTTPHeaderFields:headers]; // Initiate a request [_webView loadRequest:request];return true; }Copy the code

The way ios loads native HTML doesn’t work that way. You need to find the local resource first and then call loadFileURL: URL. For compatibility, the implementation is changed to the following:

- (bool)loadUrl:(NSString*)url withHeaders:(NSDictionary<NSString*, NSString*>*)headers {
  NSURL* nsUrl = [NSURL URLWithString:url];
  NSLog(@"webview_flutter: %@", nsUrl);
  
  NSMutableURLRequest* request = [NSMutableURLRequest requestWithURL:nsUrl];
  [request setAllHTTPHeaderFields:headers]; // The url is loaded in a different wayif([url hasPrefix:@"http"]) {
      [_webView loadRequest:request];
  }else{// In order to reduce the modification of the tripartite plugin, load the local HTML, the filename can only be named index for the time beingif(@available(iOS 9.0, *)) {NSURL *findUrl = [NSURL fileURLWithPath:[NSString stringWithFormat:@"%@/Frameworks/App.framework/flutter_assets/webres/%@", [[NSBundle mainBundle] bundlePath], @"index.html"]];
          NSLog(@"Debug >>>> %@", findUrl);
          
          NSString *loadUrl = [findUrl.absoluteString stringByReplacingOccurrencesOfString:@"index.html" withString:url];
                    NSURL * url = [NSURL URLWithString:loadUrl];
          NSLog(@"Debug >>>> load url %@", url);
          [_webView loadFileURL:url allowingReadAccessToURL:[url URLByDeletingLastPathComponent]];
      } else {
          // Fallback on earlier versions
          NSLog(@"webview_flutter: loadFileUrl error"); }}return true;
}
Copy the code

Success. Because I am Android origin, the above code took more than half an hour to write, or object-C

I finally got it.


4, summarize

The way webview_flutter is implemented on both Android and iOS is first due to the limitations of Flutter platforview. https://github.com/flutter/plugins/tree/master/packages/webview_flutter led to a keyboard problem. There is no perfect solution yet, but it works and is acceptable. Essentially the most promising implementation of flutter_webview_plugin uses a pure FLUTTER implementation, but only in full screen. You can do more research at your leisure. And the way of InappWebView and the official website is essentially the same, are using the native way, but the keyboard problem inappWebView performance is much better. To sum up, the official plug-in was selected for the evaluation to adapt to the current project.

Since the second half of last year, I have been studying Flutter for more than a month, but I stopped later. Now I need to practice Flutter again because of the product. The more I play Flutter, the more INTERESTING I find it.