Flutter實戰(zhàn)(開發(fā)簡單的新聞APP)

目錄

效果演示

問題及關鍵點

1.使用的三方庫

這里增加了三個三方庫,如下:

dependencies:
  dio: ^4.0.4  #網(wǎng)絡請求
  webview_flutter: ^2.0.9 #WebView
  path_provider: ^2.0.2 #獲取手機存儲路徑
2.異步UI更新

也就是請求完網(wǎng)絡或加載完數(shù)據(jù)再進行相關UI的加載,這里使用的是FutureBuilder,另外數(shù)據(jù)是加載的本地json文件里的數(shù)據(jù),具體代碼如下:

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();
      // 讀取點擊次數(shù)(以字符串)
      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數(shù)據(jù)如下:

{
    "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":"愿平安!甘肅張掖市肅南縣發(fā)生5.1級地震",
                "date":"2022-03-17 09:34:00",
                "category":"頭條",
                "author_name":"中國地震臺網(wǎng)",
                "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":"甘肅張掖市肅南縣發(fā)生5.1級地震,震源深度9千米",
                "date":"2022-03-17 09:34:00",
                "category":"頭條",
                "author_name":"“中國地震臺網(wǎng)”微信公眾號",
                "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":"云南大理五小時內兩地連發(fā)山火,森林消防調派七百余人救援",
                "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":"根據(jù)疫情防控有關要求 北京北站、清河站部分始發(fā)終到列車停運",
                "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":"卓資縣人民檢察院開展涉企民事執(zhí)行案件專項監(jiān)督活動",
                "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":"“桂核酸”小程序來了!柳州各大社區(qū)開始推廣,登記后可輕松查看核酸檢測碼",
                "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":"延長門診服務時間、設立涉疫孕產(chǎn)婦診療區(qū)...為金山這家醫(yī)院點贊",
                "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":"【疫情當前 警察不退】江蘇泰州:戰(zhàn)疫,有我在!",
                "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":"杭州疾控發(fā)布重要信息",
                "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":"山西省消協(xié)發(fā)布消費警示:注意!這些騙局要看清 謹防上當受騙",
                "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.列表條目的構建

這里的列表條目構建基本沒什么說的主要有兩個問題在這說下,一開始出現(xiàn)了如下問題(文字顯示在一行太長的直接報錯)


這里我是通過在外部包了一個Expanded解決的

還有最初日期顯示的Text控件也無法貼在最底下,后來包裹Expanded也無法解決,而且導致直接顯示不出來了,最后才發(fā)現(xiàn)需要指定下最外層容器的寬高才行,如下:

4.頁面跳轉

這里點擊后會跳轉一個網(wǎng)頁,網(wǎng)頁是通過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調整打開新頁面的動畫

案例源碼

https://gitee.com/itfitness/flutter-news

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容