flutter_html 和 WebView 解析html

一、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 全局搜索改

WebView 案例代码