I used to do iOS development, but later converted to React-Native, iOS WebView is ok, the latest WkWebView compatibility is ok. But when it comes to Android, I’m really tired of being dominated by all kinds of mobile phones. This article focuses on how webView is used in Flutter. Find the solution that best fits the project

webview_flutter

On iOS the WebView widget is backed by a WKWebView; On Android the WebView widget is backed by a WebView.

The import library is added in pubspec.yaml. The latest version is not used. It has not been updated to 2.0

webview_flutter: ^1.07.
Copy the code

This plugin is officially recommended and relatively easy to use

import 'package:webview_flutter/webview_flutter.dart';

@override
  void initState() {
    super.initState();
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  }

  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'https://flutter.dev',); }Copy the code

Control the width and height of webView display:

@override
  Widget build(BuildContext context) {
    return UnconstrainedBox(
      child: Container(
          height: 300,
          width: 300,
          child: WebView(
            initialUrl: 'https://flutter.dev',))); }Copy the code

Load the local HTML file

WebViewController _webViewController;

WebView(
 initialUrl: ' ',
 javascriptMode: JavascriptMode.unrestricted,
 onWebViewCreated: (WebViewController webViewController) {
   _webViewController = webViewController;
    _loadHtmlFromAssets();
  },
)

_loadHtmlFromAssets() async {
  String fileHtmlContents = await rootBundle.loadString('Local path path of the HTML file in the project');
  _webViewController.loadUrl(Uri.dataFromString(fileHtmlContents,
  mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString());
 }
Copy the code

Flutter_webview_plugin is a plugin that encapsulates webview_flutter. None of that is the point. These two plug-ins can be said to be no problem on iOS, but on Android, with the fragmented model adaptation, I encountered a special situation that oppo and Vivo mobile phone adaptation is not very good, and only Tencent X5 kernel is needed.

x5_webview

For Android load webView solution. The same pubspec.yaml file is added

x5_webview: ^0.246.
Copy the code

Android6.0 requires dynamic permission application, use the permission_handler library for permission application

Map<Permission, PermissionStatus> statuses =await[ Permission.phone, Permission.storage, ].request(); // Determine permissionsif(! (statuses[Permission.phone].isGranted && statuses[Permission.storage].isGranted)) {print("Permission denied");
    return;
}
Copy the code

Initialization:

var isOk = await X5Sdk.init();
print(isOk ? "X5 kernel loaded successfully" : "X5 kernel load failed");
Copy the code

Open the page directly

X5Sdk.openWebActivity("https://www.baidu.com",title: "Web page");
Copy the code

Embedded webView:

X5WebView(
  url: "https://www.baidu.com",
  javaScriptEnabled: true,
  header: {"TestHeader": "Test"},
  userAgentString: "my_ua"OnUrlLoading: (willLoadUrl) {_controller.loadurl (willLoadUrl); } onWebViewCreated: (control) { _controller = control; },)Copy the code

Android only

flutter_html

If encountered in the project, directly return HTML data, directly use flutter_HTML display, the same way imported

flutter_html: ^1.11.
Copy the code

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('flutter_html'),
        ),
        body: Html(data: """ 
Table support:
 
      
       Data 
      
      
 
        
         
         
        
       
 
        

         
One
         
Two
         
Three
        
 
       
 
       
 
        
 
         
Rowspan\nRowspan\nRowspan\nRowspan\nRowspan\nRowspan\nRowspan\nRowspan\nRowspan\nRowspan
         
Data
        
 
        
 
         
 
        
 
       
 
       
 
        

         
fData
         
fData
         
fData
        
 
       
 
      
""", style: {
          // tables will have the below background color
          "table": Style(
            backgroundColor: Color.fromARGB(0x50.0xee.0xee.0xee),
          ),
          // some other granular customizations are also possible
          "tr": Style(
            border: Border(bottom: BorderSide(color: Colors.grey)),
          ),
          "th": Style(
            padding: EdgeInsets.all(6),
            backgroundColor: Colors.grey,
          ),
          "td": Style(
            padding: EdgeInsets.all(6),
            alignment: Alignment.topLeft,
          ),
          // text that renders h1 elements will be red
          "h1": Style(color: Colors.red),
        }));
  }
Copy the code

Load custom rich text line compiler to edit rich textThe following information is displayed:

Flutter_fai_webview can also be described here, interested can have a look, choose a suitable for their own

one more things…..

• Chart shows

Welcome to discuss…