flutter_html 和 WebView 解析html 和 build.gradle源码

一、flutter_html

涉及的 api 接口：

http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=20

二、Flutter 解析 html

https://pub.dev/packages/flutter_html

flutter_html 案例代码 ---- 下面有WebView 案例代码

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:html/dom.dart' as dom;

class FlutterHtml extends StatefulWidget{
  FlutterHtml({Key key});
  _FlutterHtml createState() => _FlutterHtml();
}

class _FlutterHtml extends State {
  var _html = [];
  @override
  initState() {
    super.initState();
    _getData();
  }
  _getData() async{
    var response = await Dio().get('http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=20');
    var res = json.decode(response.data)['result'];
    setState(() {
      _html = res;
    });
    print(res);
  }
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(title: Text('FlutterHtml'),),
        body: ListView(
          children: <Widget>[
            Html(
              data: "${ _html.length > 0 ? _html[0]['content'] : 1}",
              //Optional parameters:
              padding: EdgeInsets.all(8.0),
              backgroundColor: Colors.white70,
              defaultTextStyle: TextStyle(fontFamily: 'serif'),
              linkStyle: const TextStyle(
                color: Colors.redAccent,
              ),
              onLinkTap: (url) {
                // open url in a webview
              },
              onImageTap: (src) {
                // Display the image in large form.
              },
              customTextStyle: (dom.Node node, TextStyle baseStyle) {
                if (node is dom.Element) {
                  switch (node.localName) {
                    case "p":
                      return baseStyle.merge(TextStyle(height: 2, fontSize: 20));
                  }
                }
                return baseStyle;
              },
            )
          ],
        )
    );
  }
}

WebView 加载的远程 web 页面：

http://www.phonegap100.com/newscontent.php?aid=198

二、Flutter WebView 组件 inappbrowser的使用

https://pub.dev/packages/flutter_inappbrowser

注意事项 Android: minSdkVersion 最小版本为17 在app文件夹下面的build.gradle 如果报错就替换 build.gradle

使用文件引入 import 'package:flutter_inappbrowser/flutter_inappbrowser.dart';

如高版本flutter_inappbrowser出错  就使用flutter_inappbrowser: ^1.2.1

//build.gradle 文件源码

def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
    localPropertiesFile.withReader('UTF-8') { reader ->
        localProperties.load(reader)
    }
}

def flutterRoot = localProperties.getProperty('flutter.sdk')
if (flutterRoot == null) {
    throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
}

def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
    flutterVersionCode = '1'
}

def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
    flutterVersionName = '1.0'
}

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

android {
    compileSdkVersion 28

    sourceSets {
        main.java.srcDirs += 'src/main/kotlin'
    }

    lintOptions {
        disable 'InvalidPackage'
    }

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.itying.flutter_app01"
        minSdkVersion 17
        targetSdkVersion 28
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig signingConfigs.debug
        }
    }
}

flutter {
    source '../..'
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

WebView 案例代码

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

class WebView extends StatefulWidget{
  WebView({Key key});
  _WebView createState() => _WebView();
}

class _WebView extends State {
  @override
  initState() {
    super.initState();
  }
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(title: Text('webView'),),
        body: Column(
          children: <Widget>[
            Expanded(
              child: InAppWebView(
                initialUrl: "http://www.phonegap100.com/newscontent.php?aid=198",
              ),
            )
          ]
        )
    );
  }
}

flutter_html 和 WebView 解析html 和 build.gradle源码

推荐阅读