目录
效果演示
问题及关键点
1.使用的三方库
这里增加了三个三方库，如下：
dependencies:
dio: ^4.0.4 #网络请求
webview_flutter: ^2.0.9 #WebView
path_provider: ^2.0.2 #获取手机存储路径
2.异步UI更新
也就是请求完网络或加载完数据再进行相关UI的加载，这里使用的是FutureBuilder，另外数据是加载的本地json文件里的数据，具体代码如下：
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Dio dio = Dio();
Future<File> _getLocalFile() async {
// 获取应用目录
String dir = (await getExternalStorageDirectories(type: StorageDirectory.downloads))!.first.path;
return File('$dir/data.json');
}
Future<String> _readCounter() async {
try {
File file = await _getLocalFile();
// 读取点击次数（以字符串）
String contents = await file.readAsString();
return contents;
} on FileSystemException {
return "";
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: FutureBuilder(
future: _readCounter(),
builder: (BuildContext context, AsyncSnapshot snapshot){
if(snapshot.connectionState == ConnectionState.done){
if(snapshot.hasError){
return const Text("请求失败");
}else{
var resJson = snapshot.data.toString();
var newsEntry = NewsModleEntity.fromJson(json.decode(resJson));
return ListView.builder(
itemCount: newsEntry.result.data.length,
itemBuilder: (BuildContext context, int index){
return NewsItem(newsData: newsEntry.result.data[index]);
}
);
}
}else{
return const Text("请求中");
}
},
)
)
);
}
}
这里json数据如下：
{
"reason":"success!",
"result":{
"stat":"1",
"data":[
{
"uniquekey":"da51d8497b392c95c90ad5fd4a163db3",
"title":"一图掌握！贵州务川本轮疫情病例活动轨迹图",
"date":"2022-03-17 09:36:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317093600272729495.html](https://mini.eastday.com/mobile/220317093600272729495.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093600_619e0860f6d58a2fd29d100fec323f86_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093600_619e0860f6d58a2fd29d100fec323f86_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093600_619e0860f6d58a2fd29d100fec323f86_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093600_619e0860f6d58a2fd29d100fec323f86_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093600_619e0860f6d58a2fd29d100fec323f86_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093600_619e0860f6d58a2fd29d100fec323f86_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"ef4c6e7e1a33cb4e63d45755c99ca990",
"title":"质量人速来：六西格玛绿带课程特惠中，手慢无！",
"date":"2022-03-17 09:35:00",
"category":"头条",
"author_name":"天行健西格玛",
"url":"[https://mini.eastday.com/mobile/220317093510596993546.html](https://mini.eastday.com/mobile/220317093510596993546.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/minimodify/20220317/1393x681_6232904e2feca_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/minimodify/20220317/1393x681_6232904e2feca_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"2ac171b7b1228421efd246f5e2504a16",
"title":"愿平安！甘肃张掖市肃南县发生5.1级地震",
"date":"2022-03-17 09:34:00",
"category":"头条",
"author_name":"中国地震台网",
"url":"[https://mini.eastday.com/mobile/220317093423702166059.html](https://mini.eastday.com/mobile/220317093423702166059.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093423_d11d401bb45b90b0274095bb53abbf19_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093423_d11d401bb45b90b0274095bb53abbf19_1_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"b21b3c7b002a2355d0c4502d81f0b713",
"title":"甘肃张掖市肃南县发生5.1级地震，震源深度9千米",
"date":"2022-03-17 09:34:00",
"category":"头条",
"author_name":"“中国地震台网”微信公众号",
"url":"[https://mini.eastday.com/mobile/220317093420136467764.html](https://mini.eastday.com/mobile/220317093420136467764.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093420_b88a292e8e9569c900e489629fa4056e_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093420_b88a292e8e9569c900e489629fa4056e_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093420_b88a292e8e9569c900e489629fa4056e_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093420_b88a292e8e9569c900e489629fa4056e_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093420_b88a292e8e9569c900e489629fa4056e_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093420_b88a292e8e9569c900e489629fa4056e_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"2c05a7d647dad3d26389a0df5d93eb90",
"title":"云南大理五小时内两地连发山火，森林消防调派七百余人救援",
"date":"2022-03-17 09:34:00",
"category":"头条",
"author_name":"澎湃新闻",
"url":"[https://mini.eastday.com/mobile/220317093402075412577.html](https://mini.eastday.com/mobile/220317093402075412577.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093402_4bab0a07f307bdb1cb35f8e1387b6437_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093402_4bab0a07f307bdb1cb35f8e1387b6437_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093402_4bab0a07f307bdb1cb35f8e1387b6437_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093402_4bab0a07f307bdb1cb35f8e1387b6437_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093402_4bab0a07f307bdb1cb35f8e1387b6437_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093402_4bab0a07f307bdb1cb35f8e1387b6437_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"ae3f2d6e214d1b197c942cb85fd0e97e",
"title":"杭州抗疫交警和家人通话 深夜的牵挂是街头最感人的一幕",
"date":"2022-03-17 09:31:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317093137168727569.html](https://mini.eastday.com/mobile/220317093137168727569.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093137_b9fb7e87ff3eac91e79dfbf87943b653_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093137_b9fb7e87ff3eac91e79dfbf87943b653_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093137_b9fb7e87ff3eac91e79dfbf87943b653_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093137_b9fb7e87ff3eac91e79dfbf87943b653_2_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"e4d966f6106a8097603bb2bfe698047f",
"title":"根据疫情防控有关要求 北京北站、清河站部分始发终到列车停运",
"date":"2022-03-17 09:31:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317093135873135682.html](https://mini.eastday.com/mobile/220317093135873135682.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093135_f398a032d8fb63d3d8990368554374d5_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093135_f398a032d8fb63d3d8990368554374d5_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093135_f398a032d8fb63d3d8990368554374d5_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093135_f398a032d8fb63d3d8990368554374d5_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093135_f398a032d8fb63d3d8990368554374d5_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093135_f398a032d8fb63d3d8990368554374d5_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"55a455a1dade6cdb2f44d63d6cbd571d",
"title":"卓资县人民检察院开展涉企民事执行案件专项监督活动",
"date":"2022-03-17 09:31:00",
"category":"头条",
"author_name":"映天水墨",
"url":"[https://mini.eastday.com/mobile/220317093124048310777.html](https://mini.eastday.com/mobile/220317093124048310777.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/minimodify/20220317/800x533_62328f6ba0a6d_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/minimodify/20220317/800x533_62328f6ba0a6d_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"5fd763472f9ff10823999c1ae0ea7a3d",
"title":"“桂核酸”小程序来了！柳州各大社区开始推广，登记后可轻松查看核酸检测码",
"date":"2022-03-17 09:26:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317092657969630573.html](https://mini.eastday.com/mobile/220317092657969630573.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092657_d3d98714624b8f296677c72e0aeb4edc_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092657_d3d98714624b8f296677c72e0aeb4edc_1_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"48ca18bf6305b2d605e2e7933773d82a",
"title":"丰泽：用“拼”的精神站成最坚实的生命之墙",
"date":"2022-03-17 09:26:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317092653496734702.html](https://mini.eastday.com/mobile/220317092653496734702.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092653_5272f966d7700795c7f46d5d4900c84f_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092653_5272f966d7700795c7f46d5d4900c84f_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092653_5272f966d7700795c7f46d5d4900c84f_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092653_5272f966d7700795c7f46d5d4900c84f_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092653_5272f966d7700795c7f46d5d4900c84f_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092653_5272f966d7700795c7f46d5d4900c84f_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"bf706c89f8d27489fa75a796dcfad4b7",
"title":"这些熟悉的身影，诠释“守护”的意涵",
"date":"2022-03-17 09:26:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317092644506717385.html](https://mini.eastday.com/mobile/220317092644506717385.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092644_f87c0492fcba29e22f198e78a4207fca_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092644_f87c0492fcba29e22f198e78a4207fca_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092644_f87c0492fcba29e22f198e78a4207fca_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092644_f87c0492fcba29e22f198e78a4207fca_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092644_f87c0492fcba29e22f198e78a4207fca_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092644_f87c0492fcba29e22f198e78a4207fca_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"f37c804468f31bae19112291d613c975",
"title":"3分钟可出预约码！金山这里的“喵喵机”方便了老年人",
"date":"2022-03-17 09:26:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317092640956301315.html](https://mini.eastday.com/mobile/220317092640956301315.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092640_b32d2f0046197801651ca66c479ef74b_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092640_b32d2f0046197801651ca66c479ef74b_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092640_b32d2f0046197801651ca66c479ef74b_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092640_b32d2f0046197801651ca66c479ef74b_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092640_b32d2f0046197801651ca66c479ef74b_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092640_b32d2f0046197801651ca66c479ef74b_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"bff7ed5f7353769f88302aaf1f2f7478",
"title":"延长门诊服务时间、设立涉疫孕产妇诊疗区...为金山这家医院点赞",
"date":"2022-03-17 09:26:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317092635548346972.html](https://mini.eastday.com/mobile/220317092635548346972.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_941a9d5dcef9949b2ff896f3c125cd53_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_941a9d5dcef9949b2ff896f3c125cd53_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_941a9d5dcef9949b2ff896f3c125cd53_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_941a9d5dcef9949b2ff896f3c125cd53_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_941a9d5dcef9949b2ff896f3c125cd53_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_941a9d5dcef9949b2ff896f3c125cd53_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"7cb74ecf1b7529797dfeff2424da55c8",
"title":"“婚礼推迟了，我反而松了口气...”",
"date":"2022-03-17 09:26:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317092635261590070.html](https://mini.eastday.com/mobile/220317092635261590070.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_a227e7af79e39385cf9af33a180b17be_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_a227e7af79e39385cf9af33a180b17be_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_a227e7af79e39385cf9af33a180b17be_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_a227e7af79e39385cf9af33a180b17be_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_a227e7af79e39385cf9af33a180b17be_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_a227e7af79e39385cf9af33a180b17be_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"7ff7214ba83c2b798debf458553e854b",
"title":"“猴房靠你们了！”“放心！”疫情里，当实验室小动物们遇上超有爱的科研人员…… | 魔都温暖",
"date":"2022-03-17 09:26:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317092634070928300.html](https://mini.eastday.com/mobile/220317092634070928300.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092634_fe202f087e3e0fc2660a21854da83d3b_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092634_fe202f087e3e0fc2660a21854da83d3b_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092634_fe202f087e3e0fc2660a21854da83d3b_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092634_fe202f087e3e0fc2660a21854da83d3b_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092634_fe202f087e3e0fc2660a21854da83d3b_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092634_fe202f087e3e0fc2660a21854da83d3b_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"962c4aa1c118c1a522adf9d76727e6c8",
"title":"@杨浦人，手机预约核酸检测，最全攻略来了",
"date":"2022-03-17 09:26:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317092631608115188.html](https://mini.eastday.com/mobile/220317092631608115188.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092631_df4a4e6fae2d94edbde7d7810ab23496_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092631_df4a4e6fae2d94edbde7d7810ab23496_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092631_df4a4e6fae2d94edbde7d7810ab23496_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092631_df4a4e6fae2d94edbde7d7810ab23496_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092631_df4a4e6fae2d94edbde7d7810ab23496_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092631_df4a4e6fae2d94edbde7d7810ab23496_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"fbae0a0f6ef3b8a4681bd01e713b2b3e",
"title":"【疫情当前 警察不退】江苏泰州：战疫，有我在！",
"date":"2022-03-17 09:22:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317092213286670471.html](https://mini.eastday.com/mobile/220317092213286670471.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092213_b8a69a25268918f8d4173cae46d111dc_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092213_b8a69a25268918f8d4173cae46d111dc_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092213_b8a69a25268918f8d4173cae46d111dc_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092213_b8a69a25268918f8d4173cae46d111dc_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092213_b8a69a25268918f8d4173cae46d111dc_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092213_b8a69a25268918f8d4173cae46d111dc_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"d993231c75510a19d818a500c2f6d8f6",
"title":"样样工作不含糊，他成了工友眼中的驻厂“三好”党员",
"date":"2022-03-17 09:22:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317092202777142355.html](https://mini.eastday.com/mobile/220317092202777142355.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092202_5399a8d047566a2a77952ec0d502fb1d_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092202_5399a8d047566a2a77952ec0d502fb1d_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092202_5399a8d047566a2a77952ec0d502fb1d_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092202_5399a8d047566a2a77952ec0d502fb1d_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092202_5399a8d047566a2a77952ec0d502fb1d_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092202_5399a8d047566a2a77952ec0d502fb1d_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"e4554742ec848fc6bd1eace9a36ba39c",
"title":"“快递小哥”化身暖心“大白”",
"date":"2022-03-17 09:22:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317092200658456886.html](https://mini.eastday.com/mobile/220317092200658456886.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092200_9f10bfb6740956971bfa7a9334aded15_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092200_9f10bfb6740956971bfa7a9334aded15_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092200_9f10bfb6740956971bfa7a9334aded15_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092200_9f10bfb6740956971bfa7a9334aded15_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092200_9f10bfb6740956971bfa7a9334aded15_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092200_9f10bfb6740956971bfa7a9334aded15_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"b358ec9c66ea33fae81a63fc29e6ff08",
"title":"独家述评｜同心抗疫，没有“孤岛”",
"date":"2022-03-17 09:21:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317092153273419656.html](https://mini.eastday.com/mobile/220317092153273419656.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092153_0a846eddcebeb5a7d3007168fef98023_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092153_0a846eddcebeb5a7d3007168fef98023_1_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"0edc2246f28d4a98149fc268ced3c550",
"title":"买盲盒上瘾？桂林一学生狂买上百个",
"date":"2022-03-17 09:17:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317091721292271209.html](https://mini.eastday.com/mobile/220317091721292271209.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317091721_a7b7762c94cc2be1164254819f7606d6_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317091721_a7b7762c94cc2be1164254819f7606d6_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317091721_a7b7762c94cc2be1164254819f7606d6_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317091721_a7b7762c94cc2be1164254819f7606d6_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317091721_a7b7762c94cc2be1164254819f7606d6_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317091721_a7b7762c94cc2be1164254819f7606d6_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"ea445c50a69f9f5996087a0efbc14f6d",
"title":"每斤不到6元，真香",
"date":"2022-03-17 08:08:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317080811837178254.html](https://mini.eastday.com/mobile/220317080811837178254.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317080811_55aa3819bacc4159a450561c4a4f152c_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317080811_55aa3819bacc4159a450561c4a4f152c_1_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"11e7fc0487785c6e1e6b8f98202715ee",
"title":"一线故事丨双警夫妻同心抗疫",
"date":"2022-03-17 08:08:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317080809915470908.html](https://mini.eastday.com/mobile/220317080809915470908.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317080809_9aa704e27d0af542c6e934a201bcc9a6_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317080809_9aa704e27d0af542c6e934a201bcc9a6_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317080809_9aa704e27d0af542c6e934a201bcc9a6_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317080809_9aa704e27d0af542c6e934a201bcc9a6_2_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"c403c969f2fa177aeb107247113af90e",
"title":"杭州疾控发布重要信息",
"date":"2022-03-17 08:04:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317080404579320067.html](https://mini.eastday.com/mobile/220317080404579320067.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317080404_d3a8cb12525bad986944cc65d851a8fd_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317080404_d3a8cb12525bad986944cc65d851a8fd_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317080404_d3a8cb12525bad986944cc65d851a8fd_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317080404_d3a8cb12525bad986944cc65d851a8fd_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317080404_d3a8cb12525bad986944cc65d851a8fd_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317080404_d3a8cb12525bad986944cc65d851a8fd_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"ecd98cd9f4952dd4b4dbdb21606f90bb",
"title":"不知道我身份证号，厨师就不能炒菜了？",
"date":"2022-03-17 08:03:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317080359897511638.html](https://mini.eastday.com/mobile/220317080359897511638.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317080359_6929b0bec166a8f71893a88298c1bb3b_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317080359_6929b0bec166a8f71893a88298c1bb3b_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317080359_6929b0bec166a8f71893a88298c1bb3b_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317080359_6929b0bec166a8f71893a88298c1bb3b_2_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"95024533c89df476181e88cb4a541788",
"title":"山西省消协发布消费警示：注意！这些骗局要看清 谨防上当受骗",
"date":"2022-03-17 07:59:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317075922099653954.html](https://mini.eastday.com/mobile/220317075922099653954.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317075922_245a833127f1ebe798ff4cebab4fd150_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317075922_245a833127f1ebe798ff4cebab4fd150_1_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"c6f28e193b286e6eb496ff74b07cfa49",
"title":"听障阿姨张惠霞，督导垃圾分类“无声胜有声”",
"date":"2022-03-17 07:49:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317074952079564799.html](https://mini.eastday.com/mobile/220317074952079564799.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317074952_1833d60d9675ab62216f2f368b4418d8_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317074952_1833d60d9675ab62216f2f368b4418d8_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317074952_1833d60d9675ab62216f2f368b4418d8_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317074952_1833d60d9675ab62216f2f368b4418d8_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317074952_1833d60d9675ab62216f2f368b4418d8_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317074952_1833d60d9675ab62216f2f368b4418d8_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"034948da7f63fecc8a3431cb88efd663",
"title":"“土坑酸菜”被曝光 杭州酸菜鱼“躺枪”了吗？",
"date":"2022-03-17 06:32:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317063214661344761.html](https://mini.eastday.com/mobile/220317063214661344761.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317063214_bf05fc488bd2ad8eeda2d772facff36b_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317063214_bf05fc488bd2ad8eeda2d772facff36b_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317063214_bf05fc488bd2ad8eeda2d772facff36b_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317063214_bf05fc488bd2ad8eeda2d772facff36b_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317063214_bf05fc488bd2ad8eeda2d772facff36b_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317063214_bf05fc488bd2ad8eeda2d772facff36b_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"e352448a6f84a0168134b0052e3794a7",
"title":"杨晓英：尽心尽力尽责为患者服务",
"date":"2022-03-17 05:05:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317050546675896182.html](https://mini.eastday.com/mobile/220317050546675896182.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317050546_ae6d7c735419b40b142cf81759d1b841_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317050546_ae6d7c735419b40b142cf81759d1b841_1_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"ad912fc05da13a91da79200c4c099cc5",
"title":"村干部跨界成为“快递小哥” 每天上下楼上百次",
"date":"2022-03-17 04:51:00",
"category":"头条",
"author_name":"人民资讯",
"url":"[https://mini.eastday.com/mobile/220317045153940595640.html](https://mini.eastday.com/mobile/220317045153940595640.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317045153_47ade9aa0895d8ba1592ae9b92af5521_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317045153_47ade9aa0895d8ba1592ae9b92af5521_1_mwpm_03201609.jpeg)",
"is_content":"1"
}
],
"page":"1",
"pageSize":"30"
},
"error_code":0
}
我把它放在了手机的如下目录：
3.列表条目的构建
这里的列表条目构建基本没什么说的主要有两个问题在这说下，一开始出现了如下问题（文字显示在一行太长的直接报错）
这里我是通过在外部包了一个Expanded解决的
还有最初日期显示的Text控件也无法贴在最底下，后来包裹Expanded也无法解决，而且导致直接显示不出来了，最后才发现需要指定下最外层容器的宽高才行，如下：
4.页面跳转
这里点击后会跳转一个网页，网页是通过WebView展示的，这里主要是修改了跳转的动画，其中WebView页面的代码如下：
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class WebViewPage extends StatelessWidget {
final String url;
final String title;
const WebViewPage({Key? key,required this.url,required this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Container(
child: WebView(initialUrl: url,),
),
);
}
}
而跳转动画可以看下我的这篇文章：Flutter调整打开新页面的动画
