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: [

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 案例代码