Flutter 加载HTML
使用第三方的库 flutter_html
写这篇文章的时候(2019-04-25),最新版为 0.9.6。
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
class NewsDetailPage extends StatelessWidget {
NewsDetailPage({
Key key,
this.title: '文章详情',
}) : super(key: key);
String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.title),
),
body: Container(
margin: EdgeInsets.all(8),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text('老兵不死,兴龙建材3:0大正铭晖', style: TextStyle(fontSize: 20),),
margin: EdgeInsets.fromLTRB(0, 0, 0, 8),
),
Container(
child: Text('佛山足球通 2019-01-18 15:42:54'),
margin: EdgeInsets.fromLTRB(0, 0, 0, 8),
),
SafeArea(
child: Html(
data:
"""<div align="center"><article id="pin_container" data-type="context"><div><p style="text-align: start;">4月6日,泽银集团2019年第二届佛山市足球协会杯的第四轮小组赛事,继续在三水人民体育场进行,这场由佛山兴龙建材足球队对阵大正铭晖生命加足球队,本轮赛事采取11人制小组积分制,分AB两组积分前两名出线。</p><div class="pgc-img" style="text-align: start;"><img src="http://p3.pstatp.com/large/pgc-image/1c0ea271bc61472fbf23df4bf5408d14" img_width="15902" img_height="5304" alt="老兵不死,兴龙建材3:0大正铭晖" inline="0"><p class="pgc-img-caption" style="text-align: center;"></p></div><p style="text-align: start;">第四轮第一场小组赛【佛山兴龙建材足球队VS大正铭晖生命加足球队】</p><p style="text-align: start;">【时间】2019年4月6日14:00</p><p style="text-align: start;">【战绩】3:0</p><p style="text-align: start;">【地点】三水人民体育场</p><p style="text-align: start;">【天气】28度</p><p style="text-align: start;">【气温】晴朗</p><p style="text-align: start;">比赛前,全体人员进行默哀仪式,缅怀英烈,悼念在四川木里森林火灾中牺牲的30位救火烈士。</p><div class="pgc-img" style="text-align: start;"><img src="http://p3.pstatp.com/large/pgc-image/fd16cf33c9fe439f80ab770581b601c2" img_width="7952" img_height="5304" alt="老兵不死,兴龙建材3:0大正铭晖" inline="0"><p class="pgc-img-caption" style="text-align: center;"></p></div><div class="pgc-img" style="text-align: start;"><img src="http://p3.pstatp.com/large/pgc-image/cf1f5f827d094423a806bf6375256709" img_width="7952" img_height="5304" alt="老兵不死,兴龙建材3:0大正铭晖" inline="0"><p class="pgc-img-caption" style="text-align: center;"></p></div><p style="text-align: start;">比赛开始,双方都是摆出442的阵容进行一个前期的试探,节奏稍显得较慢,第3分钟开始,兴龙队的由于自身的优势,对大正铭晖队展开压迫的攻势,可惜连续两个的射门都没有建功。接下来继续由兴龙队领衔进攻,大正铭晖队防守为主,守门员叶伟强的发挥不错,化解了两次的进攻威胁。由于大正铭晖队的防守严密,兴龙队的进攻一直没有成功。</p><div class="pgc-img" style="text-align: start;"><img src="http://p3.pstatp.com/large/pgc-image/4d499127b5654b598222f8b2ba4bd4ba" img_width="7952" img_height="5304" alt="老兵不死,兴龙建材3:0大正铭晖" inline="0"><p class="pgc-img-caption" style="text-align: center;"></p></div><div class="pgc-img" style="text-align: start;"><img src="http://p1.pstatp.com/large/pgc-image/3d0c92bc6cd648ba8a3130ba9ebc1bf4" img_width="7952" img_height="5304" alt="老兵不死,兴龙建材3:0大正铭晖" inline="0"><p class="pgc-img-caption" style="text-align: center;"></p></div><p style="text-align: start;">20分钟,大正铭晖队35号马荣亨在禁区手球,获得黄牌一张,裁判加罚点球,兴龙队9号林磊毅操刀罚球,守门员反应不到右侧破网,1:0。</p><div class="pgc-img" style="text-align: start;"><img src="http://p1.pstatp.com/large/pgc-image/6ee4f13cdce546139d0af87f69955b2c" img_width="7952" img_height="5304" alt="老兵不死,兴龙建材3:0大正铭晖" inline="0"><p class="pgc-img-caption" style="text-align: center;"></p></div><p style="text-align: start;">接下来大正铭晖队也开始有几波防守反击,可惜没有把握好机会,球权又回到兴龙队,兴龙队继续对大正铭晖队展开狂攻,第37分钟,大正铭晖队守门员受伤退场,换上临时守门员,大正铭晖少打一人继续迎战。</p><div class="pgc-img" style="text-align: start;"><img src="http://p1.pstatp.com/large/pgc-image/6a8f77c24fdb49eda9df6a19906b4276" img_width="7952" img_height="5304" alt="老兵不死,兴龙建材3:0大正铭晖" inline="0"><p class="pgc-img-caption" style="text-align: center;"></p></div><p style="text-align: start;">第42分钟,兴龙队10号项思澄左侧突破,交出一个漂亮的传中,越过大正铭晖队的守门员,兴龙队18号霍文波及时跟进,用胸口将皮球撞进球门,比分2:0,比分维持到上半场结束。</p><div class="pgc-img" style="text-align: start;"><img src="http://p1.pstatp.com/large/pgc-image/b09618e550db4ad393a8cb19b38b2034" img_width="7952" img_height="5304" alt="老兵不死,兴龙建材3:0大正铭晖" inline="0"><p class="pgc-img-caption" style="text-align: center;"></p></div><div class="pgc-img" style="text-align: start;"><img src="http://p1.pstatp.com/large/pgc-image/61b3a50438144660bedc4f31c4e5a057" img_width="7952" img_height="5304" alt="老兵不死,兴龙建材3:0大正铭晖" inline="0"><p class="pgc-img-caption" style="text-align: center;"></p></div><p style="text-align: start;">下半场,双方都有队员的更换,大正铭晖队人齐继续与兴龙队交锋。兴龙队也是继续包揽进攻,大正铭晖队的老兵也是把握每一次的进攻机会进行反击。35号马荣亨也是全队防守端最亮眼的表现,多次的防守调度发挥的不错。</p><div class="pgc-img" style="text-align: start;"><img src="http://p3.pstatp.com/large/pgc-image/6082333319574e4eb2d5e3a56da3a758" img_width="7952" img_height="5304" alt="老兵不死,兴龙建材3:0大正铭晖" inline="0"><p class="pgc-img-caption" style="text-align: center;"></p></div><p style="text-align: start;">接下来是一个胶着的过程,双方队员都表现出十分高昂的战意,都有交出数次威胁的攻门,大正铭晖队没有因为落后两球而有丝毫的气馁,尽显体育精神,27号的冯国权两次的单刀射门也是十分漂亮,可惜都被兴龙队守门员没收。</p><div class="pgc-img" style="text-align: start;"><img src="http://p3.pstatp.com/large/pgc-image/b1771acfc3ff450da067839d28046381" img_width="7952" img_height="5304" alt="老兵不死,兴龙建材3:0大正铭晖" inline="0"><p class="pgc-img-caption" style="text-align: center;"></p></div><p style="text-align: start;">下半场的30分钟内双方都是互交白卷,双方继续你来我往的进行交锋,大正铭晖队的一班老兵的状态也是越来越好,化解了兴龙队的几波进攻。</p><div class="pgc-img" style="text-align: start;"><img src="http://p1.pstatp.com/large/pgc-image/9804ba8ef5eb456b9a25cda34d490dc6" img_width="7952" img_height="5304" alt="老兵不死,兴龙建材3:0大正铭晖" inline="0"><p class="pgc-img-caption" style="text-align: center;"></p></div><p style="text-align: start;">第86分钟,兴龙队一波中路突破,大正铭晖队的后卫也是防守到位,混乱中兴龙队12号邓国庆接到皮球,近距离将皮球踢进空门,比分扩大到3:0,接下来兴龙队继续扩大进攻力度,希望取得更多的战果,可惜双方都是没有进球,就这样比分维持到裁判的哨声响起,大正铭晖队的老兵们也是完成了佛山足协杯的最后一次亮相,将佛山足球的风采维持到了最后,为老兵喝彩!</p><div class="pgc-img" style="text-align: start;"><img src="http://p9.pstatp.com/large/pgc-image/cd6c37539d3e4f25827139baacc62019" img_width="7952" img_height="5304" alt="老兵不死,兴龙建材3:0大正铭晖" inline="0"><p class="pgc-img-caption" style="text-align: center;"></p></div><p style="text-align: start;">此次足协杯全程由泽银体育进行独家直播,关注“佛山足协”,“佛山足球通”,“体坛先锋”公众号均有直播间入口,届时会有大量奖金奖品在直播间放送,敬请大家关注!</p><p align="center"><img src="http://p9.pstatp.com/large/pgc-image/071aa15e85e4488f988925207dbd376b"></p><p><strong>更多精彩赛事请</strong></p><p><strong>长按识别二维码关注我们</strong></p></div></article></div>""",
),
),
],
),
),
),
);
}
}